Javascript 如何在单击时使用（逗号）附加输入值？

我的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="" />

---

但它不起作用。我该怎么做？

这把小提琴解决了您的问题：

我做的第一个更改是将文本移动到

标记中。这允许您按预期单击它们

接下来，我将

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);
        }
    });
});​

jQuery（文档）.ready（函数（）{
jQuery（“a.closebutton”）。单击（函数（a）{
var v=jQuery（this.parent（）.attr（'rel'）；
var t=jQuery（“输入#删除用户”）.val（）；
if（t.indexOf（v）<0）{
如果（t.长度>0）{
t+=“，”；
}
jQuery（“输入#删除用户”）.val（t+v）；
}
});
});​

---

我添加了额外的检查，以确保没有输入重复项，并且只有在必要时才添加逗号。

此小提琴解决了您的问题：

我做的第一个更改是将文本移动到

标记中。这允许您按预期单击它们

接下来，我将

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);
        }
    });
});​

jQuery（文档）.ready（函数（）{
jQuery（“a.closebutton”）。单击（函数（a）{
var v=jQuery（this.parent（）.attr（'rel'）；
var t=jQuery（“输入#删除用户”）.val（）；
if（t.indexOf（v）<0）{
如果（t.长度>0）{
t+=“，”；
}
jQuery（“输入#删除用户”）.val（t+v）；
}
});
});​

我添加了额外的检查以确保没有输入重复项，并且只有在必要时才添加逗号。

---

首先，我建议不要使用

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>

---

首先，我建议不要使用

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

中删除值。

---

希望这有帮助

我已经打开了工作代码，这样您就可以看到它在运行

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

中删除值。

---

希望这有帮助

单击一次会将项目添加到隐藏值中，单击第二次会将其删除或不从值中删除？@Ivan Hušnjak no.每次仅使用（，）分隔符进行添加。类似于？？？单击一次会将项目添加到隐藏值中，单击第二次会将其删除或不从值中删除？@Ivan Hušnjak no.每次仅使用（，）进行添加时分隔符。类似于？？？既然OP已经选择了您的答案，我会要求您处理逗号，因为这将使其完整！；）我猜他希望它简单快速，但你可以建议编辑我的帖子，并添加第二个解决方案（但保留我的）。我将+1你的答案。既然OP已经选择了你的答案，我将要求你处理逗号，因为这将使它完整！；）我猜他希望它简单快速，但你可以建议编辑我的帖子，并添加第二个解决方案（但保留我的）。我将+1你的答案。

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(",") );
});

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();
});

});​