Question

我有一个带有“section-a”类的div，其中包含类“key”按钮的div和它们对应的值。

我需要遍历这些“键”div，并仅更改单击的div的颜色。

请参阅摘录：

<div class="keyboard">
  <div class="section">
    <div class="section-a">
      <div class="key function space1">
        esc
      </div>

      <div class="key function">
        F1
      </div>
      <div class="key function">
        F2
      </div>
      <div class="key function">
        F3
      </div>

因此，如果您点击F1，字体的颜色将变为绿色，如果再次单击按钮（或其他按钮），则返回白色。

我知道你需要使用toggleClass，但问题是迭代包含类密钥的div。

另一个解决方案（但不是最好的编程实践）会为每个按钮添加一个onclick事件，这很容易，但不是很干。

我最接近的是使用：

$(document).click(function(){
    $('div[class*="key"]').css('color', 'green');
});

但反过来这不会选择当前点击的元素。

我非常确定我在这里错过了一些简单的东西！

Answer 1

请查看下面的工作代码段。您不需要迭代，使用jQuery，您可以修改元素数组的类，在本例中，包含类key的每个元素。在click事件监听器上，$(this)将引用被单击的元素，以便您可以直接将突出显示的类添加到其中。

＆＃13;

$('body').on('click', '.key', function(){
  $('.key').removeClass('highlighted');
  $(this).addClass('highlighted');
});

＆＃13;

.highlighted{
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="section-a">
  <div class="key function space1">esc</div>
  <div class="key function">F1</div>
  <div class="key function">F2</div>
  <div class="key function">F3</div>
</div>

＆＃13;

Answer 2

尝试以下方法：

$('body').click('.key',function(e){
    $('div.key').css('color', 'green');
    $('div.key').not(e.target).css('color', '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keyboard">
  <div class="section">     
      <div class="section-a">
            <div class="key function space1">
             esc
            </div>

            <div class="key function">
              F1
            </div>
            <div class="key function">
              F2
            </div>
            <div class="key function">
              F3
            </div>
        </div>
    </div>
</div>

Answer 3

 $('div[class*="key"]').on("click",function(){
    $('div[class*="key"]').each(function(){
      $(this).css("color","black");
    });
    $(this).css("color","green")
  });

如果div包含具有类“key”的另一个（或子）div，则更改clicked div的颜色

3 个答案: