javascript - 如何在 jQuery 中将类添加到选定的跨度？

问题描述

我正在尝试为已选择的跨度设置一个类（突出显示），并在选择另一个跨度时将其删除。我需要在哪里设置这个类？

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

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

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

标签： javascriptjquery

解决方案

嗨，我已经稍微更改了您的代码，更改是：

添加一个计数器来检测每次点击。

添加一个 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>

希望能帮助到你

javascript - 如何在 jQuery 中将类添加到选定的跨度？

问题描述

解决方案

推荐阅读