Question

当我点击一个特定的div时，该div应该淡出，简单，但当我点击其中一个div时，它会删除堆栈顶部的div，即当我点击＃sel6时它会删除sel5

HTML代码

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>

</div>

jQuery代码 sel_id，sel_1是变量

$('.selc_d').bind('click',function(){ 
  var sel_id = $('.sel').attr('id');
  alert(sel_id);

  $('#'+sel_id).fadeOut('slow');
  $('#'+sel_id).remove();
  $('.search_box').append(sel_1);
});

Answer 1

$('.sel').bind('click',function(){
    var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});

请注意this ... this的使用将包含点击的元素。

你在做什么

var sel_id = $('.sel').attr('id');

哪个会始终选择第一个div sel，在这种情况下，ID为sel5

的div

##你想要什么##

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

    <div id="sel5" class="sel">something</div>
    <div id="sel6" class="sel">something</div>
    <div id="sel7" class="sel">something</div>

</div>

$('.sel').bind('click',function(){
    var sel_id = $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});

Answer 2

看起来，你正在尝试这样的事情

$('.sel').bind('click', function(){
    $this = $(this);
    $this.fadeOut('slow', function(){$this.remove();});
    $('.search_box').append(this.id);
});

Answer 3

那是因为你说$（'。sel'）

你需要抓住被点击的那个，而不是任何拥有该类的人。要根据需要进行工作，请执行此操作

$('.sel').click( function() {
    var sel_id = $(this).attr('id');

    $(this).fadeOut('slow');

    // Wait for it to fade out before you remove it
    setTimeout( function() {
        $('#' + sel_id).remove();
    }, 1000 );


    $('.search_box:first').append(sel_id);
});

在.bind（'click'）上它没有删除第一个div

3 个答案: