javascript - 如何将类添加到 jQuery 中选定的范围？

Question

我正在尝试为选定的范围设置一个类(突出显示)，并在选择另一个范围时将其删除。我需要在哪里设置这个类？

这是为我正在开发的电话键盘之王而设计的。我基本上正在编写一个代码，有人刚刚回答了我发布的上一个问题。我一直在尝试设置这个类，但我无法让它按我的意愿工作。

代码如下:http://jsfiddle.net/b6wfeaxz/3/

JS/jQuery

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;
    }

        $(this).children(".letter").eq(index).addClass('highlighted');
    index += direction;
  } else {
    $(".button").removeClass("selected");
    $this.addClass("selected");

    index = 0;
  }

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

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

});

HTML -

<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>

CSS

 .highlighted {
   border: 1px solid red;
 }

我希望通过添加highlighted类来选择跨度，并在选择另一个字母时将其删除。

Answer 1

这是一种不同的方法，但似乎更容易将突出显示逻辑与selected点击事件分开。

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;
  }
  
  removeHighlight();
  $(this).find('span.letters').addClass('highlighted');

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

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

function removeHighlight() {
	var $letters = $('div.keypad').find('.letters');
  $letters.each(function() {
  	$(this).removeClass('highlighted');
  });
}

.button {
  float: left;
  width: 100px;
  height: 100px;
  margin: 20px 20px;
}
.num {
  font-size: 50px;
}
.result {
  font-size: 100px;
  color: blue;
  padding: 50px;
}
.highlighted {
  border: 1px solid red;
}
div.num {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="result">A</div>

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