Как я могу сохранить элементы в массиве и проверить, существует ли значение? - PullRequest
Новая
       1

Как я могу сохранить элементы в массиве и проверить, существует ли значение?

2 голосов
/ 10 августа 2011

Я создаю форму, которая позволяет вам подписаться на оповещения на нашем веб-сайте, позволяя пользователю вводить ключевые слова в форму.

Я настроил проверку, хотя jquery, который я использовал, даже мне кажется несколько запутанным, он работает!

Сейчас я пытаюсь настроить форму так, чтобы при вводе ключевого слова она проверяла, введено ли уже это ключевое слово.

например. Я добавил «облако» в свой список и случайно попытался добавить его снова, форма должна предупредить меня и не позволить мне добавить его в мой список.

Я думаю, что решение было бы сохранить ключевое слово в массиве "KeywordList", а затем циклически использовать цикл для каждого, как в PHP: 

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

Но я не знаю, как сохранить ключевое слово в массиве или извлечь его из него

вот мой HTML: 

    <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: 

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

Ответы [ 2 ]

3 голосов
/ 10 августа 2011

Вам не нужно использовать массив. Вместо этого используйте карту / ассоциативный массив. Вы можете сделать что-то вроде этого: 

var keywords = {};

Тогда, если ваше ключевое слово находится в переменной keyword, вы можете сделать: 

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 2 ), которое вы получили бы с массивом.

1 голос
/ 10 августа 2011

Самый простой и наименее дорогой метод - использовать массив (которым вы являетесь), но в качестве ключа массива поместите ключевые слова в массив: 

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
}

, что избавляет вас от лишних затрат на поиск в массиве каждый раз, когда вам нужно проверить конкретное ключевое слово.

...