我是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而不是display block。
答案 0 :(得分: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>