使用onclick和parent将元素一次添加到同级元素 [英] Appending an element once to a sibling element using onclick and parents

问题描述

我正试图(很糟糕)要做的是单击某个元素时将其隐藏，然后将一些文本附加到其上方的body元素上.我能够成功地将父div作为目标，添加了一个clicked类，然后将该div的兄弟姐妹作为目标，以将新的div及其后续文本附加到其上.问题是，当这些父div中的几个位于屏幕上时，当我单击页面上其他div中的元素时，它将在其之前的div中添加另一个附加的"content" div.我很有可能以我可能做的最低效的方式来做.我的Java语言技能不足...

What I'm trying (poorly) to do is to hide an element when it is clicked, and append some text to the body element above it. I was able to successfully target the parent div, add a class of clicked, then target the siblings of that div to append the new div and its subsequent text to it. The issue is that, with several of these parent divs living on screen, when I click the element within the other divs on the page, it adds another appended 'content' div to the divs before it. It is quite possible I'm doing this in the most inefficient way I can be; my Javascript skills are lacking...

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

推荐答案

这是因为第一次单击link时，它将为field-name-field-review-useful提供一个clicked类.然后，您要检查field-name-field-review-useful是否具有clicked类，如果具有，则附加content.

That's because the first time you click a link, it gives field-name-field-review-useful a class of clicked. Then you're checking if field-name-field-review-useful has the clicked class, and if it has, append the content.

第二次单击link时，会发生相同的事情，除了您现在具有field-name-field-review-useful类的两个元素，因此它将内容再次添加到其中.

The second time you click a link, the same thing happens, except you now have two elements with the field-name-field-review-useful class, so it appends the content to it again.

我建议您使用 one() 附加点击处理程序，这样，点击处理程序每​​个元素只会触发一次(请注意，以下内容未经测试):

I'd suggest that you attach the click handler using one(), that way, the click handler will only fire once per element (please note, the below is untested):

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.

Note: I've made an assumption that .field-name-field-review-useful only has one siblings with the class .field-name-body, if that's not the case, then you'll see the same behaviour as before (content being appended to multiple .field-name-body's). If that is the case, you'd have to restructure your markup, or use some other traversal methods to get so that you can get the relevant .field-name-body.

这篇关于使用onclick和parent将元素一次添加到同级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！