どのように要素を配列に格納し、値が存在するかどうかを確認できますか？

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 = {}; 

：あなたはこのような何かを行うことができ

keywords[keyword] = true; 

キーワードcloudを持っていたのであれば、何を基本的に持っていることは次のとおりです。

keywords['cloud'] = true; 

あなたがしなければならないすべては、その存在を確認するには、次の

if(keywords[keyword]) { 
    ... 
} 

今リストにキーワードを追加するために、あなたはこのような何か行うことができます。

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）があるが、それはOよりも優れているが（nは）あなたはなるだろう配列で。

Answer 2

最も簡単な方法と、最も安価で（あなたは）配列を使用しますが、配列のキーのように、アレイにキーワードを置くことです。その後

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

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

、キーワードの存在をチェックすることですあなたの配列にあなたが特定のキーワードをチェックする必要があるたびに、検索の全体のオーバーヘッドを節約

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

の単純な問題。