如何添加输入值，点击时点击（逗号）？

我有HTML像下面，如何添加输入值，点击时点击（逗号）？

<ul class="holder" style="width: 512px;"> 
    <li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I" 
    rel="[email protected]" 
    class="bit-box">[email protected]<a href="#" class="closebutton"></a> 
    </li> 
    <li id="pt_9O0pMJDhtNbRgU1vNM8He8Vh9zpJ1tcE" 
    rel="[email protected]" 
    class="bit-box">[email protected]<a href="#" 
    class="closebutton"></a> 
    </li> 
    <li id="pt_U8JH5E9y5w4atm4CadEPvuu3wdh3WcBx" 
    rel="[email protected]" 
    class="bit-box">[email protected]<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="" />

我需要李时珍的值存储在隐藏的输入框中，当我点击李的。如果我点击第一二里的我需要存储的值一样，

<input id="removeuser" value="[email protected],[email protected]" />

这是我需要追加输入值，每次当我点击李的。

我用下面的一个，

jQuery(document).ready(function(){     

     jQuery("a.closebutton").click(function(){ 

      jQuery("input#removeuser").val(jQuery.map(jQuery(this).parent().attr('rel')).join(",")); 

     }); 

    });

不过，这并不works.how我能做到这一点？

来源

2012-09-03 Ravichandran Jothi

点击一次将项目添加到隐藏值，第二次点击删除它或不删除值？ –

@IvanHušnjak无论何时它只能与（，）分隔符一起添加。 –

类似[THIS]（http://jsfiddle.net/WpyUf/7/）？ – adeneo

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

来源

2012-09-03 10:08:48 Gustonez

这一个适合我。感谢 –

现在OP已经选择了您的答案，我会要求您处理逗号，因为这将使其完成！;） – bPratik

我想他希望它简单快捷，但你可以建议编辑我的文章，并添加第二个解决方案（但保持我的）。我会+1你的答案。 – Gustonez

这拨弄解决您的问题：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); 
     } 
    }); 
});

我addded的额外的检查，以确保没有输入副本，并且逗号仅所附时必要的。

来源

2012-09-03 10:08:26 bPratik

这一个很好干净 – Gustonez

首先，我会建议，而不是使用rel属性（具有特定的含义（X）HTML与某些标记）您使用HTML安全data-*属性

是这样的：

<li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I" data-email="[email protected]" 
class="bit-box">[email protected]<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; 
    }); 
})

来源

2012-09-03 10:11:03

尝试：

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

来源

2012-09-03 10:12:17

我已经把工作代码上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中删除一个值。希望这有助于！

来源

2012-09-03 10:21:02 Tiquelou

如何添加输入值，点击时点击（逗号）？

回答

相关问题