Question

我正在尝试使用这个jQuery来附加一些HTML然后解除它

if( !(jQuery(check).hasClass('selected'))){
    jQuery(this).append('<span class="selected">&nbsp;</span>');
   }

我如何才能做到这一点并进行实时更新？我只是想在用户“点击”或“关闭”时添加此元素？

即。如果检查没有“已选择”类 - 追加 - 否则删除？

Answer 1

由于您的问题有点模糊且缺少标记，因此我使用了演示的基本复选框示例。我在jsFiddle here

中添加了一个现场演示的链接

HTML：

<input type="checkbox" id="test" /> Check me

<div id="items"></div>

JavaScript的：

$("#test").bind('click', function(){

  var $t = $(this);

  if($t.is(':checked')){
    // append item
    $('#items').append('<span class="selected">I was recently appended.</span>');
  }else{
    // empty div and remove it from DOM (empty helps with memory leak issues with remove() )
    $('span', '#items').empty().remove();
  }
});

Answer 2

我认为更好的方法可能是将每个追加的结果存储到数组或变量中，并在删除元素时循环执行该操作。对于单个元素，

// Appending
var ele = $('<span>', {
    html: 'nbsp;', 
    class: 'selected'
}).appendTo(container);

// Removing
ele.remove();

如果您是在事件处理程序中执行此操作，则应在外部作用域中定义变量ele，以便以后可以访问它。对于多个项目：

// Appending
var ele = [];
ele.push($('<span>', {
    html: 'nbsp;', 
    class: 'selected'
}).appendTo(container));

// Removing
for(var i = 0; i < ele.length; i++){
    ele[i].remove();
}

同样，数组ele应该在任何事件处理程序的范围之外定义。否则，这个问题的其他答案也会起作用。

Answer 3

jQuery('#check').click(function() {
    var check = jQuery(this);

    if ( !check.hasClass('selected') ) {
        jQuery('#mydiv').append('<span class="selected">&nbsp;</span>');
        check.addClass('selected');
    } else {
        jQuery('#mydiv span.selected').remove();
        check.removeClass('selected');
    }
});

Answer 4

我认为你不需要在那里添加span标签。那么，代码可以像这样短。

$("#check").click(function(){
    $(this).hasClass('selected') ? $(this).removeClass('selected') : $(this).addClass('selected');
});

jQuery追加和删除

4 个答案: