使用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。