使用onclick和父母将元素追加一次到一个兄弟元素

Question

我试图（很差）做的是隐藏一个元素，当它被点击时，并追加一些文本到它上面的主体元素。我能够成功地定位父div，添加一个clicked类，然后定位该div的兄弟，以便将新div及其后续文本附加到它。问题是，在屏幕上显示其中几个父div，当我点击页面上其他div的元素时，它会在div之前添加另一个附加的“content”div。我很可能以最低效的方式做到这一点;我的JavaScript技能缺乏...

var link = $('.is-useful-link a'); 
    var unclicked = $('.field-name-field-review-useful'); 


    link.click(function(){ 
     $(this).parents('.field-name-field-review-useful').addClass('clicked'); 
     if (unclicked.hasClass('clicked')) { 

      var $clicked = $('.field-name-field-review-useful.clicked'); 
      var content = '<div class="thanks animated fadeIn">Thanks for your feedback!</div>'; 

      $clicked.hide(); 
      $clicked.siblings('.field-name-body') 
       .append(content); 

     } else { 
      return false; 
     } 
    }); 

Answer 1

那是因为你第一次点击link，它给field-name-field-review-useful一类clicked。然后你检查field-name-field-review-useful是否有clicked类，如果有，请附加content。

第二次单击link时，会发生同样的情况，除了现在有两个元素与field-name-field-review-useful类之外，所以它会再次将内容附加到它。

我建议你使用附加one()，这样的点击处理程序，单击处理只会每个元素触发一次（请注意，以下是未经测试）：

link.one('click', function() { 
    $(this).parents('.field-name-field-review-useful') 
     .addClass('clicked') // do you need this anymore? 
     .hide() 
     .siblings('.field-name-body').append(content);  
}); 

注：我我们假设.field-name-field-review-useful只有一个类.field-name-body的兄弟姐妹，如果情况并非如此，那么您会看到与以前相同的行为（内容被附加到多个.field-name-body's）。如果是这样的话，你必须重构你的标记，或者使用一些其他的遍历方法来获得相关的.field-name-body。