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＆＃39; not()从一组元素中排除被点击的元素。但是，您试图从选定的<a>元素集中排除<strong>元素（单击的元素）。您绑定点击事件的元素是<a>，而不是<strong>。

从.emotion-choice元素的总集合中排除点击的元素，然后在中选择该元素集合中的<strong>标记（排除所点击元素的集合）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一种可视化方式：

$('#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('-');

});