javascript - JQuery:修改除我单击的元素之外的所有元素？

Question

我想更改我没有点击的所有其他名为 emotion-choice 的元素的不透明度，但 .not() 对我来说是新的，所以我我对此不太熟悉，可能需要一些帮助。这是我的代码:

$('#modal-content').on('click', '.emotion-choice', function(e) {
    e.preventDefault(e);        
    var current = $('.emotion-choice > span > strong').text();
    $('.emotion-choice > span > strong').not(current).html('a');    
    console.log(this);
});

如果它与我单击的元素相同，它就会起作用，但因为它是一个子元素，这让我感到困惑。

HTML(这实际上是一个循环，我也想更改标题):

<a class="emotion-choice" href="#">
            <span class="pull-left">
            <strong class="pl10">'.$emotions[$key].'</strong>
            </span>
            </a>

编辑2:

$('#modal-content').on('click', '.emotion-choice', function(e) {
    e.preventDefault(); 
    $(this).find('> span > strong').css('opacity',1);
    $(this).find('> span > strong > span').html('test');
    $('.emotion-choice').not(this).find('> span > strong').css('opacity',0.4);  
    $('.emotion-choice').not(this).find('> span > strong > span').css('opacity',0.4);
});

HTML:

<a class="emotion-choice" href="#">
            <span class="pull-left">
            <strong class="pl10">'.$emotions[$key].'</strong>
            <span style="background:url(img/emotions.png) 0 -'.$y.'px; height:70px; width:90px; 
            display:block; margin:20px 15px 0 0"></span>
            </span>
            </a>

Answer 1

您可以使用 jQuery 的 not() 从一组元素中排除单击的元素。但是，您试图排除 <a>选定的 <strong> 集合中的元素(单击的元素)元素。您绑定(bind)点击事件的元素是 <a> ，不是<strong> .

从 .emotion-choice 的总集合中排除单击的元素元素，然后选择 <strong>该组元素(排除单击的元素的组)内的标签。

$('#modal-content').on('click', '.emotion-choice', function(e) {
  e.preventDefault();
  $('.emotion-choice').not(this).find('> span > strong').html('-');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal-content">
  <a class="emotion-choice"><span><strong>test1</strong></span></a>
  <a class="emotion-choice"><span><strong>test2</strong></span></a>
  <a class="emotion-choice"><span><strong>test3</strong></span></a>
  <a class="emotion-choice"><span><strong>test4</strong></span></a>
  <a class="emotion-choice"><span><strong>test5</strong></span></a>
  <a class="emotion-choice"><span><strong>test6</strong></span></a>
  <a class="emotion-choice"><span><strong>test7</strong></span></a>
</div>

另一种可视化方式:

$('#modal-content').on('click', '.emotion-choice', function(e) {
  e.preventDefault();

  // define all "emotion" elements, excluding the clicked one (this)
  var $elements_excluding_this=$('.emotion-choice').not(this);  

  // select all "> span > strong" elements within the set of selected "emotion" elements
  var $strong_tags = $('> span > strong', $elements_excluding_this);

  // set the HTML content for the selected set of "strong" tags
  $strong_tags.html('-');

});