创建元素功能不起作用

Question

我是Javascript的新人，所以我有一个小问题，首先是我的 live Code & 写在这里。

这是我的 index.php 文件

<ul id="friends">
<li id="Maxi" class="user">Maxi</li>
<li id="John" class="user">John</li>
<li id="Henry" class="user">Henry</li>
<li id="Max"  class="user">Max</li>
<li id="Simon" class="user">Simon</li>
</ul>
<div id="windows"></div>

这是我的样式表页面。

.user{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}

这是我的js页面

    $(document).ready(function(){
$('.user').click(function(){
    var id = $(this).attr("id");
    $html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
    $('#windows').append($html);

});

});
$(document).ready(function(){
    $('#friends').on('click','.user', function(){
    $('.mwindow').hide();
    });
  });

所以我的问题是，当我点击其中一个用户时，显示显示 none 而不是显示块。

Answer 1

发生这种情况是因为您有这一行 $('.mwindow').hide();，它隐藏了您附加到 #windows 的元素。要在按下 x 时隐藏元素，您应该将事件附加到 .cls 并附加到 hide 父元素。

$(document).ready(function(){
    $('#windows').on('click','.cls', function(){
       $(this).parent().parent().hide();
    });
});

$(document).ready(function(){
$('.frnd').click(function(){
    var id = $(this).attr("id");
    $html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
    $('#windows').append($html);
 
});

});
$(document).ready(function(){
 $('#windows').on('click','.cls', function(){
      $(this).parent().parent().hide();
 });
});

body{
margin:0;
background-color:#999;
height:700px;
}
.frnd{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="friends">
    <li id="Maxi" class="frnd">Maxi</li>
    <li id="John" class="frnd">John</li>
    <li id="Henry" class="frnd">Henry</li>
    <li id="Max"  class="frnd">Max</li>
    <li id="Simon" class="frnd">Simon</li>
</ul>
<div id="windows"></div>

创建元素功能不起作用

Create element function doesn't work

html

javascript

css

jquery

element