当李点击时,如何用(逗号)附加输入值
How to append input value with ,(comma) when li click?
我有下面这样的HTML,
<ul class="holder" style="width: 512px;">
<li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I"
rel="test1@gmail.com"
class="bit-box">test1@gmail.com<a href="#" class="closebutton"></a>
</li>
<li id="pt_9O0pMJDhtNbRgU1vNM8He8Vh9zpJ1tcE"
rel="test2@gmail.com"
class="bit-box">test2@gmail.com<a href="#"
class="closebutton"></a>
</li>
<li id="pt_U8JH5E9y5w4atm4CadEPvuu3wdh3WcBx"
rel="test3@gmail.com"
class="bit-box">test3@gmail.com<a href="#"
class="closebutton"></a></li>
<li id="Project_update_user_id_annoninput"
class="bit-input">
<input type="text" autocomplete="off" size="0" class="maininput"></li>
</ul>
<input id="removeuser" value="" />
当我点击李时,我需要将李的值存储在隐藏的输入框中。如果我点击前两个li,我需要存储值,比如
<input id="removeuser" value="test1@gmail.com,test2@gmail.com" />
也就是说,每次单击李时,我都需要附加输入值。
我用了下面的一个,
jQuery(document).ready(function(){
jQuery("a.closebutton").click(function(){
jQuery("input#removeuser").val(jQuery.map(jQuery(this).parent().attr('rel')).join(","));
});
});
但它不起作用。我该怎么做?
http://jsfiddle.net/ySV6F/
jQuery(document).ready(function(){
jQuery("a.closebutton").click(function(){
jQuery("input#removeuser").val(jQuery("input#removeuser").val() + "," + jQuery(this).parent().attr('rel'));
$(this).remove();
return false;
});
});
这个fiddle修复了您的问题:http://jsfiddle.net/pratik136/zVmwg/
我做的第一个更改是在<a />
标签中移动您的文本。这使您可以按预期点击它们。
接下来,我将JS
更改为:
jQuery(document).ready(function() {
jQuery("a.closebutton").click(function(a) {
var v = jQuery(this).parent().attr('rel');
var t = jQuery("input#removeuser").val();
if (t.indexOf(v) < 0) {
if(t.length>0){
t += ",";
}
jQuery("input#removeuser").val(t + v);
}
});
});
我添加了额外的检查,以确保没有重复输入,并且只有在必要时才添加逗号。
尝试:
var arr = [];
$(".closebutton").click(function(e) {
e.preventDefault();
var email = $(this).parent("li").attr("rel");
if( $(this).hasClass("added") ) {
arr= $.grep(arr, function(value) {
return value != email;
});
$(this).removeClass("added");
}
else {
arr.push( email );
$(this).addClass("added");
}
$("input[id='removeuser']").val( arr.join(",") );
});
首先,我建议不要使用rel
属性(在带有某些标签的(X)HTML中具有特定含义),而是使用HTML安全的data-*
属性
像这样:
<li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I" data-email="mdineshkumarcs@gmail.com"
class="bit-box">mdineshkumarcs@gmail.com<a href="#" class="closebutton"></a></li>
要访问此属性,只需使用jQuery $(elem).attr('data-email')
现在没有重复的解决方案:
jQuery(document).ready(function(){
jQuery("a.closebutton").click(function(){
var value = $(this).parent().attr('data-email');
var values = $("input#removeuser").val().split(',');
var is_in = false;
// already in?
$.each(values, function(i, e){
if(e == value) {
is_in = true; return false; // set and exit each
}
});
if (!is_in) {
values.push(value);
$("input#removeuser").val(values.join(','));
}
return false;
});
})
我已经将工作代码放在jsFiddle上,这样您就可以看到它的实际操作。
jQuery(document).ready(function(){
jQuery("a.closebutton").bind('click', function(){
var data = $(this).parent().attr('rel');
if($("#removeuser").val() == ""){
$("#removeuser").val(data);
} else {
$("#removeuser").val(", "+data);
}
$(this).parent().hide();
});
});
在这里,我将删除单击后的li
。我相信您也可以使用.toggle()
函数来使用户从#removeuser
中删除值。希望这能有所帮助!
相关文章:
- 使用正则表达式将输入格式设置为单字符逗号、单字符逗号等
- 我如何在数字插入中使用逗号,这样它就不会'不要破坏我的输入字段
- 计算输入中有多少逗号分隔的字符串
- 当李点击时,如何用(逗号)附加输入值
- 输入只允许6位数字,逗号分隔后,允许角js中的另外6位数字
- Javascript 在键入输入时忽略逗号
- 由于JavaScript的原因,iPhone在输入数字字段中添加了逗号
- Angularjs观察用户在输入文本中键入逗号的情况
- 如何检查输入框是否仅包含数字或逗号
- 如何使此数字输入接受逗号
- 输入中第 11 个逗号后发出警报
- 输入中只有带有点(不是逗号)的浮点值 - jQuery
- 带有输入模式的 Javascript 数字和逗号
- j查询逗号分隔的电话号码掩码输入
- 单击提交按钮后从输入框中删除逗号
- 从单个输入中列出/输出逗号分隔的值
- 在输入值中加逗号
- 为什么在Firefox中输入逗号时,这个正则表达式会删除所有字符
- 在空格中输入逗号(javascript)
- JavaScript代码不允许我输入逗号