使用onclick和parents将元素追加到兄弟元素一次

Question

我正在尝试（不好）做的是在单击时隐藏元素，并将一些文本附加到其上方的body元素。我能够成功地定位父div，添加一个单击的类，然后定位该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。