2013-07-17 103 views
1

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

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; 
     } 
    }); 

enter image description here

回答

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

+0

我不需要使用上述代码的.addClass功能。这非常有效。非常感谢,比利。 – Threaded

相关问题