如何防止javascript中的重復條目？

Question

我有一個問題，防止輸入重復，我只使用一個按鈕同時動態生成兩個頁面的單選按鈕，我從用戶拿取標簽，並從該標簽生成一個單選按鈕，我想防止用戶輸入2個相同的標簽，這里是為2頁生成無線電的腳本，任何幫助將不勝感激

function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<input />', {
    'type': 'radio',
    'fieldset':'group',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'b',
    'value': '1'}));
$('#after').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}

function createRadioFortSecondPage(elem, label, checked) {
var id = 'option1_' + label;
$('#Inserthere').append($('<input />', {
    'type': 'radio',
    'fieldset':'group',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'b',
    'value': '1'}));
$('#Inserthere').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}

這是我寫的函數，以防止重復：

function checkDublicates(){
     var isExist=true;
     var x = document.getElementById('option').value;
     var labels = [];   
$('#after input[type=radio]').each(function() {
     labels.push($('label[for='+$(this).attr('id')+']').text());


    });
    for(var i=0;i<labels.length;i++){

    if(x==labels[i])
    {
        isExist=false;}
        else{
        isExist=true;}
      }
    return isExist;}

那就是按鈕動作：

$('#AddButton').click(function(){
     var exist=checkDublicates();
     <!--var isEmpty=validate();-->
    <!--if(exist==true){
        <!--alert("Duplicates Are Not Allowed!");
        <!--}else{
    var y=document.getElementById('question').value
    document.getElementById('headTitle').innerHTML=y;
    if(exist==false){
        alert("Duplicates Not Allowed!")
    }else{
    createRadioElement(this,$('#option').val(),true);
    createRadioFortSecondPage(this,$('#option').val(),true);
  }

  });

Answer 1

只需使用$.inArray(val, arr)就行了！ http://api.jquery.com/jQuery.inArray/

但只是關於你的代碼的評論。

更換

document.getElementById('question').value

通過

$('#question').val()

和

document.getElementById('headTitle').innerHTML=y

通過

$('#headTitle').html(y)

會更清潔;-)

Answer 2

您可以使用這個方便的功能將元素推入數組並同時檢查重復項。 如果它捕獲重復，它將返回true 。

var noDupPush = function (value, arr) {

    var isDup = false;

    if (!~$.inArray(value, arr)) {
        arr.push(value);
    } else {
        isDup = true;
    }

    return isDup;

};

// You can use it like this

var arr = ['green'];
if (noDupPush('green', arr)){
  // Dup exists
}
// Or else it will just push new value to array

Answer 3

您可以生成包含標簽文本的id，然后快速檢查是否存在包含該文本的元素。 例如：

function generateLabelId( userinput ){ 
    return 'awesomelabel_' + userinput.replace(/\W/g,'');
}

var label = document.getElementById(generateLabelId( userinput ));
var labelDoesNotExist = (label == undefined );

if (labelDoesNotExist){
    // create your element here
    // making sure that you add the id from generateLabelId
}