87,839
社区成员
发帖
与我相关
我的任务
分享怎么判断jquery增加节点的时候内容是否重复
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
li{list-style: none;}
.div{width: 280px; margin: 50px auto;}
.box_head{border: 1px solid #DDDDDD; padding: 10px;}
.box_head li{width: 150px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}
.box_head li.on{background: #e74303;}
.box,.menu,.box1{margin-top: 10px; float: left; width: 260px;}
.box li{width:200px;height: 30px; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; float: left; cursor: pointer;}
.box li span.s{margin-left: 20px; color: #00BCF3; cursor: pointer;}
.box li span.t{color: #00BCF3; cursor: pointer;}
.box .b_a{width: 165px; height: 30px; background: #00BCF3; text-align: center; line-height: 30px; color: #FFFFFF; display: block;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="div">
<div class="box_head js_box_head">
<ul>
<li>内容1</li>
</ul>
</div>
<div class="box js_box_m">
<ul>
<li class="box_li"><input class="input_text" type="text" /><span class="s js_s">删除</span></li>
<li><span class="t js_t">添加input</span></li>
</ul>
</div>
<div class="box"><a class="b_a js_bc" href="javascript:;">保存到box_head</a></div>
</div>
</body>
<script>
$(function(){
$('.js_t').on('click',function(){
var html = '<li class="box_li"><input class="input_text" type="text" /><span class="s js_s">删除</span></li>';
$(this).parent().before(html);
});
$('.js_box_m').delegate('.js_s','click',function(){
$(this).parent().remove();
});
$(".js_bc").click(function(){
var text=$(".input_text").val();//获取标签文字
var the_li='<li>'+ text +'</li>';//插入标签
$(".js_box_head li").each(function fun(){//判断是否重复
txt=$(this).text();
if(text==txt){
alert("该内容已添加");
return false;
}
})
if(txt!=text){//如果不重复则添加
$(".js_box_head ul").append(the_li);
}
})
});
</script>
</html>
问题1：这样只能判断一个input添加的内容是否重复 如果我多添加了几个input 应该怎么判断内容是否重复
问题2：点击删除的时候 怎么把js_box_head 里面的内容对应删除掉
...全文
请发表友善的回复…
发表回复
魔力 2015-10-10
- 打赏
- 举报
请问下 当输入框里面的内容为空 而又没有点击删除 点击保存的时候怎么判断输入框为空的删除s_box_head 里面对应的内容[/quote]
请问下 如果是修改输入框里面的内容 直接替换掉原来的内容 比如我把输入框111修改成555 点击保存 怎么替换掉js_box_head里面111内容 换成555
魔力 2015-09-25
- 打赏
- 举报
是清空后，再移除BOX里面的相应元素[/quote]
那你这样做的话，功能逻辑上都有问题。试想下这种场景：你已经输入了一个“13”，接下来你想要输入“23”，可是你输入错误了，又输入了一个“13”，这个时候你删除了“13”，BOX里面的内容页被删除了，但实际上你不想删除“13”，所以你又要重新输入一遍。所以你要真想做这种功能是有问题的！
建议你在输入窗口旁边加一个清空按钮，点击清空，清空输入内容，和BOX里面相应的内容。[/quote]
好的 谢谢了 了解了
zpjshiwo77 2015-09-25
- 打赏
- 举报
是清空后，再移除BOX里面的相应元素[/quote]
那你这样做的话，功能逻辑上都有问题。试想下这种场景：你已经输入了一个“13”，接下来你想要输入“23”，可是你输入错误了，又输入了一个“13”，这个时候你删除了“13”，BOX里面的内容页被删除了，但实际上你不想删除“13”，所以你又要重新输入一遍。所以你要真想做这种功能是有问题的！
建议你在输入窗口旁边加一个清空按钮，点击清空，清空输入内容，和BOX里面相应的内容。
魔力 2015-09-24
- 打赏
- 举报
是清空后，再移除BOX里面的相应元素
zpjshiwo77 2015-09-24
- 打赏
- 举报
那你的意思是想把3333那个输入框和BOX里面的内容完全绑定起来（输入框里面删除了一个3，BOX里面也删除一个3），还是只有清空后，再移除BOX里面的相应元素？
魔力 2015-09-24
- 打赏
- 举报
图片上传错了
例如跟图上一样 当我把3333或者把所有input的内容清空了 点击保存的时候怎么删除s_box_head 里面对应的内容
魔力 2015-09-24
- 打赏
- 举报
例如跟图上一样 当我把3333或者把所有input的内容清空了 点击保存的时候怎么删除s_box_head 里面对应的内容
zpjshiwo77 2015-09-24
- 打赏
- 举报
你这句话表述不清楚啊，你是想把空当做删除操作么？删除box下的第一个元素？还是所有元素？
估计你的意思是点击保存后，在box里面添加了空，但因为是空，所以要执行删除操作，删除掉空。那你为什么不判断它是空的话就不添加呢？如果是这样的话在添加操作里面加一个判断不就行了么把if(check(val))改成if(check(val)&&val!="")
魔力 2015-09-24
- 打赏
- 举报
请问下 当输入框里面的内容为空 而又没有点击删除 点击保存的时候怎么判断输入框为空的删除s_box_head 里面对应的内容
zpjshiwo77 2015-09-24
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
li{list-style: none;}
.div{width: 280px; margin: 50px auto;}
.box_head{border: 1px solid #DDDDDD; padding: 10px;}
.box_head li{width: 150px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}
.box_head li.on{background: #e74303;}
.box,.menu,.box1{margin-top: 10px; float: left; width: 260px;}
.box li{width:200px;height: 30px; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; float: left; cursor: pointer;}
.box li span.s{margin-left: 20px; color: #00BCF3; cursor: pointer;}
.box li span.t{color: #00BCF3; cursor: pointer;}
.box .b_a{width: 165px; height: 30px; background: #00BCF3; text-align: center; line-height: 30px; color: #FFFFFF; display: block;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="div">
<div class="box_head js_box_head">
<ul>
<li>内容1</li>
</ul>
</div>
<div class="box js_box_m">
<ul>
<li class="box_li"><input type="text" /><span class="s js_s">删除</span></li>
<li><span class="t js_t">添加input</span></li>
</ul>
</div>
<div class="box"><a class="b_a js_bc" href="javascript:;">保存到box_head</a></div>
</div>
</body>
<script>
$(function(){
$('.js_t').on('click',function(){
var html = '<li class="box_li"><input type="text" /><span class="s js_s">删除</span></li>';
$(this).parent().before(html);
});
$('.js_box_m').delegate('.js_s','click',function(){
$(this).parent().remove();
var item=$(this).siblings("input").val();
$(".box_head li").each(function(){
if(item==this.innerHTML){
$(this).remove();
}
});
console.log(item);
});
$('.js_bc').on('click',function(){
$('.js_box_m li').each(function(){
var data = $(this).hasClass('box_li');
var val = $(this).find('input').val();
if(data){
if(check(val)){
$('.js_box_head').append('<li>'+ val +'</li>');
}
else{ alert("请不要输入重复信息");}
}
});
});
function check(x){
var result = true;
$(".box_head li").each(function(){
if(x==this.innerHTML){result=false;}
});
return result;
}
});
</script>
</html>
