요소를 배열에 저장하고 값이 있는지 확인하려면 어떻게해야합니까?

Question

사용자가 양식에 키워드를 입력 할 수있게하여 웹 사이트에서 알림을 신청할 수있는 양식을 만듭니다.

나는 jquery를 사용했지만 다소 복잡하게 보였지만 유효성을 설정했습니다. 작동합니다!

키워드를 입력 할 때 이미 키워드를 입력했는지 확인하기 위해 양식을 설정하려고합니다.

내 목록에 "클라우드"를 추가했는데 실수로 다시 추가하려고하면 양식이 경고를 받아 내 목록에 추가하지 못하게해야합니다.

나는이 솔루션은 PHP처럼 각 루프를 사용을 통해,는 "키워드 목록"배열의 다음주기를 키워드를 저장하는 것입니다 생각 :

foreach (KeywordList as KeywordListArrayElement){ 
     if(KwValue == KeywordListArrayElement){ 
      alert ("The keyword '+KwValue+' has already been added"); 
      return false; 
     } 
} 

하지만 난을 저장하는 방법을 모른다

다음

<form action="" method="get" name="Test Form" target="_self" id="alerts_form" dir="ltr" lang="en"> 
     <fieldset id="alerts_options"> 
      <label for="email_address">Email: </label> 
      <input type="text" id="email_address" name="email_address" tabindex="1" autofocus="autofocus" autocomplete="on" required="required" value="" /><div class="email-alert form_val" style="display: none;">Please enter a valid email address</div><br /> 
      <label for="keywords">Keyword(s): </label> 
      <input type="text" id="keywords" name="keywords[]" tabindex="2" autocomplete="on" value="" /> 
      <button id="addKeyword" name="addKeyword" value="">+</button><br /> 
      <div id="KeywordList"></div> 
      <div class="keyword-alert form_val" style="display: none;">Please input at least one keyword</div> 
      <label for="frequency">Frequency: </label> 
      <select tabindex="3" id="frequency" name="frequency"><br /> 
      <optgroup> 
      <option selected="selected" value=""></option> 
      <option value="1">Daily</option> 
      <option value="7">Weekly</option> 
      <option value="30">Monthly</option> 
      </optgroup> 
      </select><div class="frequency-alert form_val" style="display: none;">Please make a selection</div><br /> 
      <input type="hidden" id="Step" name="Step" value="2" /> 
      <div class="clear"></div> 
      <button class="alert_button" type="submit" id="submit" name="UpdateAlertOption" value="Unconfirmed">Submit</button><br /> 
      <button class="alert_button" type="submit" name="UpdateAlertOption" value="Delete">Delete</button><br /> 
      <button class="alert_button" type="submit" name="UpdateAlertOption" value="Delete All">DeleteAll</button> 
      <input type="hidden" value="" name="" class="KwdBox" /> 
     </fieldset> 
    </form> 

내 JQuery와 있습니다 : : 배열의 키워드 또는 여기

에서 그것을 가져 나의 HTML입니다

<script type='text/javascript'> 
jQuery(document).ready(function($){ 

    $("#addKeyword").click(function(event) { 
    event.preventDefault(); 
    var KwValue = $("#keywords").val(); 
    if($("#keywords").val()==""){ 
     alert('Please input a keyword'); 
     } 

     else 
     { 
      var squareBrackets = "[]"; 

       $("#keywords").css('background-color', '#FFFFFF'); 
       $("#alerts_options .keyword-alert").hide(); 
      $('<input type="text" class="KwdBox" name="keywords'+squareBrackets+'" value="'+KwValue+'" tabindex="2" autocomplete="on" required="required"/>') 
      .appendTo('#KeywordList'); 
      $("#keywords").val(""); 
      $(".KwdBox").click(function(event){ 
       event.preventDefault(); 
       $(this).remove(); 

      }); 
     } 
    }); 

    $("#alerts_options .email-alert").hide(); 
    $("#alerts_options .keyword-alert").hide(); 
    $("#alerts_options .frequency-alert").hide(); 

    $("#submit").click(function(){ 


     var frequency = 1; 
     if($("[name=frequency]").val()==""){ 
     frequency = 0; 
     }else{ 
     frequency = 1; 
     } 
     var keyword = 1; 
     if($("#keywords").val()=="") { 
     keyword = 0; 
     } 
     if($(".KwdBox").val() >""){ 
     keyword = 1; 
     } 
     var email = 1; 
     if(!checkEmail($("[name=email_address]").val())){ 
     email = 0; 
     }else{ 
     email = 1; 
     } 
     //frequency empty, email empty, kw empty 
     if(frequency == 0 && email == 0 && keyword == 0){ 
      $("#keywords").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');   
      $("#alerts_options .form_val").show(); 
      return false; 
     } 
     else{ 
      $("#alerts_options .form_val").hide(); 
     } //frequency empty, email on, kw empty 
     if(frequency == 0 && email > 0 && keyword == 0){ 
      $("#keywords").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=email_address]").css('background-color', '#FFFFFF'); 
      $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');  
      $("#alerts_options .email-alert").hide(); 
      $("#alerts_options .keyword-alert").show(); 
      $("#alerts_options .frequency-alert").show(); 
      return false; 
     }//frequency empty, email on, kw on 
     if(frequency == 0 && email > 0 && keyword > 0){ 
      $("#keywords").css('background-color', '#FFFFFF'); 
      $("[name=email_address]").css('background-color', '#FFFFFF'); 
      $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)'); 
      $("#alerts_options .email-alert").hide(); 
      $("#alerts_options .keyword-alert").hide(); 
      $("#alerts_options .frequency-alert").show(); 
      return false; 
     }//frequency on, email on, kw empty 
     if(frequency > 0 && email > 0 && keyword == 0){ 
      $("#keywords").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=email_address]").css('background-color', '#FFFFFF'); 
      $("[name=frequency]").css('background-color', '#FFFFFF'); 
      $("#alerts_options .email-alert").hide(); 
      $("#alerts_options .keyword-alert").show(); 
      $("#alerts_options .frequency-alert").hide(); 
      return false; 
     } 
     if(frequency > 0 && email == 0 && keyword > 0){ 
      $("#keywords").css('background-color', '#FFFFFF'); 
      $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=frequency]").css('background-color', '#FFFFFF'); 
      $("#alerts_options .email-alert").show(); 
      $("#alerts_options .keyword-alert").hide(); 
      $("#alerts_options .frequency-alert").hide(); 
      return false; 
     } 
     if(frequency == 0 && email == 0 && keyword > 0){ 
      $("#keywords").css('background-color', '#FFFFFF'); 
      $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)'); 
      $("#alerts_options .email-alert").show(); 
      $("#alerts_options .keyword-alert").hide(); 
      $("#alerts_options .frequency-alert").show(); 
      return false; 
     } 
      if(frequency > 0 && email == 0 && keyword == 0){ 
      $("#keywords").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)'); 
      $("[name=frequency]").css('background-color', '#FFFFFF'); 
      $("#alerts_options .email-alert").show(); 
      $("#alerts_options .keyword-alert").show(); 
      $("#alerts_options .frequency-alert").hide(); 
      return false; 
     } 

    }); 
}); 
</script> 

Answer 1

배열을 사용할 필요가 없습니다. 대신 map/associative-array를 사용하십시오. 키워드가 변수 keyword에있는 경우

var keywords = {}; 

그런 다음, 당신이 할 수 있습니다 : 당신은 같은 것을 할 수있는 당신이 키워드 cloud이 있다면 그래서

keywords[keyword] = true; 

을, 당신은 기본적으로 무엇을 가지고 :

:

keywords['cloud'] = true; 

은 당신이 할 일은, 그 존재를 확인하려면 이제

(3210)는이 같은 것을 할 수있는 목록에 키워드를 추가 :이 O (N)이다

var KwValue = $("#keywords").val(); 

var keywordArray = KwValue.split(/\s*,\s*/); //assuming that your keywords are separated by commas: 

for(var i = 0; i < keywordArray.length; i++) { 
    var keyword = keywordArray[i]; 

    if(!keywords[keyword]) { 
     keywords[keyword] = true; 
     ... 
    } 
} 

을하지만,이 O보다 낫다 (N ²) 당신은 얻을 것 배열로. 하는 키워드의 존재를 확인, 그 후

var keywords = {}; // not really an array, but we'll just pretend it is 

keywords['hello'] = true; 
keywords['there'] = true; 
etc... 

:

Answer 2

간단한 방법, 그리고 가장 저렴한 배열을 (당신이있는)를 사용하지만 배열의 키의 같은 배열에 키워드를 넣어하는 것입니다 당신에게 배열 당신이 특정 키워드를 확인하기 위해 필요할 때마다 검색의 전체 오버 헤드를 저장

if (keywords[yourvarhere]) { 
    ... it exists 
} 

의 간단한 문제.