如何添加輸入值，點擊時點擊（逗號）？

我有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

如何添加輸入值，點擊時點擊（逗號）？

回答

相關問題