87,984
社区成员
发帖
与我相关
我的任务
分享关于筛选问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.div,.div1{
width: 400px;
margin: 0 auto;
}
.div li{
width: 100px;
height: 35px;
border:1px solid #DCDCDC;
line-height: 35px;
text-align: center;
display:inline-block;
cursor: pointer;
}
.div li.active{
background: #00BCF3;
color: #FFF;
}
.div1 a{
background: #00BCF3;
display: inline-block;
font-size: 14px;
line-height: 28px;
margin: 0 5px 5px 0;
padding: 0 10px 0 10px;
position: relative;
}
</style>
<script type="text/javascript">
$(function(){
$('.div li').on('click',function(){
var html = '';
var text = $(this).text();
var shu = $(".div li.active").length;
if(!$(this).hasClass('active')){
$(this).addClass('active');
if($('.div li.active').length > 10){
alert('目的地最多支持10个');
$(this).removeClass('active');
}
html += '<a href="javascript:;">'+text+'</a>'
$('.div1').append(html);
}else{
$(this).removeClass('active');
}
});
$('.div1 a').live('click',function(){
$(this).remove();
var index = $(this).length;
$('.div').eq(index).removeClass("active");
alert($('.div').find('li').eq(index))
alert(index)
});
});
</script>
</head>
<body>
<div class="div">
<ul>
<li>厦门</li>
<li>香港</li>
<li>北京</li>
<li>天津</li>
<li>澳门</li>
<li>广州</li>
<li>杭州</li>
<li>南京</li>
<li>西安</li>
<li>大连</li>
<li>三亚</li>
<li>重庆</li>
</ul>
</div>
<div class="div1" style="margin-top:20px;">
</div>
</body>
</html>
请问下 例如当我点击div 里面“厦门”的时候 div1创建了”厦门“ 怎么再次点击div 里面“厦门” 把div1 里面的”厦门“删除 还有就是 点击div1 里面的”厦门“ 把当前的删除 div里面”厦门“ removeclass
...全文
请发表友善的回复…
发表回复
wu65656 2014-09-10
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.div,.div1{
width: 400px;
margin: 0 auto;
}
.div li{
width: 100px;
height: 35px;
border:1px solid #DCDCDC;
line-height: 35px;
text-align: center;
display:inline-block;
cursor: pointer;
}
.div li.active{
background: #00BCF3;
color: #FFF;
}
.div1 a{
background: #00BCF3;
display: inline-block;
font-size: 14px;
line-height: 28px;
margin: 0 5px 5px 0;
padding: 0 10px 0 10px;
position: relative;
}
</style>
<script type="text/javascript">
$(function(){
$('.div li').on('click',function(){
var _class = $(this).attr('data-id');
if(!$(this).hasClass('active')){
if($('.div li.active').length >= 10){
alert('目的地最多支持10个');
return false;
}else{
$(this).addClass('active');
var _html = $(this).text();
$('.div1').append('<a href="javascript:void(0)" data="' + _class + '">' + _html + '</a>');
}
}else{
$(this).removeClass('active');
$('.div1 a').each(function(){
if($(this).attr('data') == _class){
$(this).remove();
}
});
}
});
$('.div1 a').live('click',function(){
var _class = $(this).attr('data');
$('.div li').each(function() {
if ($(this).attr('data-id') == _class) {
$(this).removeClass('active');
}
})
$(this).remove();
});
});
</script>
</head>
<body>
<div class="div">
<ul>
<li data-id="1">厦门</li>
<li data-id="2">香港</li>
<li data-id="3">北京</li>
<li data-id="4">天津</li>
<li data-id="5">澳门</li>
<li data-id="6">广州</li>
<li data-id="7">杭州</li>
<li data-id="8">南京</li>
<li data-id="9">西安</li>
<li data-id="10">大连</li>
<li data-id="11">三亚</li>
<li data-id="12">重庆</li>
</ul>
</div>
<div class="div1" style="margin-top:20px;">
</div>
<div class="div1" style="margin-top:20px;">
</div>
</body>
</html>
jizza1991710 2014-09-02
- 打赏
- 举报
<script type="text/javascript">
$(function(){
$('.div li').click(function(){
var html = '';
var text = $(this).text();
var shu = $(".div li.active").length;
if(!$(this).hasClass('active')){
$(this).addClass('active');
if($('.div li.active').length > 10){
alert('目的地最多支持10个');
$(this).removeClass('active');
}
else
{
html += '<a href="javascript:;">'+text+'</a>'
$('.div1').append(html);
$('.div1 a').click(function(){
$str=$(this).text();
$(this).remove();
//$('.div').eq(index).removeClass("active");
$('.div').children("ul").children("li").each(function(){
if($(this).text()==$str)
{
$(this).removeClass("active");
}
});
});
}
}else{
$(this).removeClass('active');
}
});
});
</script>
ff和ie 都测试了你说的效果我都做出了 希望满意.
你原先的代码问题主要是获取div1的a连接添加点击事件 不应该方在外面写 。。应该放在 你追加好这个a连接后添加 要不然找不到目标的
