使用 onclick 和 parent 将元素一次附加到兄弟元素

Question

我正在尝试（糟糕地）做的是在单击元素时隐藏它，并将一些文本附加到它上面的 body 元素。我能够成功地定位父 div，添加一个 clicked 类，然后定位该 div 的兄弟姐妹以将新 div 及其后续文本附加到它。问题是，由于其中几个父 div 存在于屏幕上，当我单击页面上其他 div 中的元素时，它会将另一个附加的“内容”div 添加到它之前的 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 类的兄弟姐妹，如果不是这种情况，那么您将看到与以前相同的行为（内容被附加到多个 @987654334 @)。如果是这种情况，你就必须重构你的标记，或者使用一些其他的遍历方法来获取，这样你就可以得到相关的.field-name-body。