如何在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;
 }

我希望通過添加突出顯示的類來選擇跨度，並在選擇另一個字母時將其刪除。

Answer 1

據我了解，問題是從未選中的字母中刪除了類，對嗎？ 嘗試使用each函數首先從所有字母中刪除該類。

像這樣：

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

Answer 2

這是一個快速修復。 基本上，您將保留每個按鈕的所有方向和索引的數組。 然后，通過單擊按鈕的索引選擇需要編輯的那個。 這不是理想的解決方案，但它可以工作。 希望能有所幫助。

var index     = [0,0,0];
var direction = [1,1,1];

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

  var $this = $(this);
    if (index[$this.index()] >= $this.find(".letter").length - 1) {
        direction[$this.index()] *= -1;
    } else if (direction[$this.index()] == -1 && index[$this.index()] == 0) {           
        direction[$this.index()] *= -1;
    }
    $('.letter').each(function(){
        $(this).removeClass('highlighted');
    })
    $(this).children(".letter").eq(index[$this.index()]).addClass('highlighted');

  var result = $(this).children(".letter").eq(index[$this.index()]).text();
  $(".result").text(result);
  //you have to add to the index after the result
  index[$this.index()] += direction[$this.index()];

});

Answer 3

這是一種不同的方法，但似乎更容易將突出顯示邏輯與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> 

Answer 4

嗨，我對您的代碼做了一些更改，這些更改是：

1. 添加計數器以檢測每次點擊。

2. 添加一個num變量和actual_number以便重置按鈕之間的計數器。

     var counter = 0; var num = ""; $(".button").on("click", function (e) { var $this = $(this); actual_number = $(this).children(".num").text(); if(counter < 3 && num == actual_number ){ $(".letter").removeClass('highlighted'); $(this).children(".letter").eq(counter).addClass('highlighted'); var result = $(this).children(".letter").eq(counter).text(); $(".result").text(result); counter++; }else{ counter=0; num = $(this).children(".num").text(); $(".letter").removeClass('highlighted'); $(this).children(".letter").eq(counter).addClass('highlighted'); var result = $(this).children(".letter").eq(counter).text(); $(".result").text(result); counter++; } }) 

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

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

希望能幫助到你