javascript - 在 .bind ('click' 上)它不会删除第一个 div

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

这将始终选择第一个具有 sel 类的 div，在本例中为 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);
});