如何在jQuery中的每次单击上一个一组地遍历div？

Question

I'm trying to output the text of each span, one by one, within the respective group, every time I click its parent button.

I've tried different codes, but none of them worked for me. So, this is what I've been working on. http://jsfiddle.net/b6wfeaxz/2/

js / jQuery

$( ".button" ).on( "click", function(){
  $this = $(this);
  $this.find( '.letter' ).each(function() {

    $('.result').text($this.find('.letter').text());

  });
});

HTML5

<div class="result">A</div>

<div class="keypad">
  <div class="button">
    <div class="num">1</div>
    <span class="letter">A</span>
    <span class="letter">B</span>
    <span class="letter">C</span>
  </div>
  <div class="button">
    <div class="num">2</div>
    <span class="letter">D</span>
    <span class="letter">E</span>
    <span class="letter">F</span>
  </div>
  <div class="button">
    <div class="num">3</div>
    <span class="letter">G</span>
    <span class="letter">H</span>
    <span class="letter">I</span>
  </div>
</div>

Basically, I expect this to go back and forth with every click within the same button. In other words, I need this to work the same as a telephone keypad function, but the actual output is all three letters at once.

Answer 1

Here's the fix, I realise this may not be the tidiest solution so feel free to edit:

var index     = 0;
var direction = 1;

$(".button").on("click", function () {

  var $this = $(this);

  if ($this.hasClass("selected")) {
    if (index >= $this.find(".letter").length - 1) {
        direction *= -1;
    } else if (direction == -1 && index == 0) {
        direction *= -1;
    }
    index += direction;
  } else {
    $(".button").removeClass("selected");
    $this.addClass("selected");

    index = 0;
  }

  var result = $(this).children(".letter").eq(index).text();

  $(".result").text(result);

});

http://jsfiddle.net/cndaeh7q/6/