Question

我目前正在使用以下脚本创建一个按钮来显示/隐藏WordPress上的评论。但是，我想将代码生成的<button>包装在<div>中，但我似乎无法使代码的这一部分正常工作。这是代码：

jQuery(document).ready(function() {

// Get #comment-section div
var commentsDiv = jQuery('#comment-section');

// Only do this work if that div isn't empty
if (commentsDiv.length) {

// Hide #comment-section div by default
jQuery(commentsDiv).hide();

// Append a link to show/hide
jQuery('<button/>')
    .attr('class', 'toggle-comments')
    .attr('href', '#')
    .html('Show Comments <span class="icon_comment"></span>')
    .insertBefore(commentsDiv);

// Encase button in #toggle-comments-container div
jQuery('<div/>')
    .attr('id', 'toggle-comments-container')
    .wrap('.toggle-comments');

// When show/hide is clicked
jQuery('.toggle-comments').on('click', function(e) {
    e.preventDefault();

// Show/hide the div using jQuery's toggle()
jQuery(commentsDiv).toggle('slow', function() {
// change the text of the anchor
    var anchor = jQuery('.toggle-comments');
    var anchorText = anchor.html() == 'Show Comments <span class="icon_comment"></span>' ? 'Hide Comments <span class="icon_comment"></span>' : 'Show Comments <span class="icon_comment"></span>';
    jQuery(anchor).html(anchorText);
});
});

} // End of commentsDiv.length

});

代码按预期生成按钮，但不会按预期将其包装在<div>中。

Answer 1

我认为您的wrap()功能错误了

jQuery('.toggle-comments').wrap(jQuery('<div/>', {
    id: 'toggle-comments-container'
}))

您需要在必须包装的元素上调用wrap()函数（在本例中为toggle-comments），然后传递必须将元素包装为参数的元素（在本例中） div）

jQuery-Created <div> </div>中的.wrap（）jQuery-Created Button

1 个答案: