如何在jQuery中将类添加到所选范围? [英] How to add a class to the selected span in jQuery?

问题描述

我正在尝试为所选范围设置一个类(突出显示)，并在选择另一个范围时将其删除.我需要在哪里设置此类?

I'm trying to set a class (highlighted) to the span been selected and removing it when another span has been selected. Where do I need to set this class?

这是我正在使用的电话键盘之王.我基本上是在编写代码，有人刚刚回答了我之前发布的问题.我一直在尝试设置此类，但是我无法按照自己的意愿进行设置.

This is for a king of telephone keypad I'm working on. I'm basically working on a code that someone just answered on a previous question I posted. I've been trying to set this class, but I can't make it work as I wish.

以下是代码: 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;
 }

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

I expect the span to be selected by adding the class highlighted and be removed when another letter has been selected.

推荐答案

这是另一种方法，但是将突出显示逻辑与selected click事件分开似乎更容易.

This is a different approach, but seems easier to separate the highlight logic from the selected click event.

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>

这篇关于如何在jQuery中将类添加到所选范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！