创建元素功能不起作用

时间:2015-05-17 15:29:05

标签: javascript jquery html css element

我是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。

1 个答案:

答案 0 :(得分:1)

这种情况正在发生,因为您有这一行$('.mwindow').hide();,它会隐藏您追加到#windows的元素。要在按x时隐藏元素,您应该将事件附加到.clshide父母。

$(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>