jQuery проверяет скрытые элементы и использует их данные

Question

Я пытаюсь чего-то достичь здесь. После нажатия на ссылку значение скрытого элемента, указанного для этой ссылки, будет установлено равным 1 (по умолчанию 0). Это отлично работает.

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

Таким образом, переменная с идентификаторами должна выглядеть следующим образом: hidden1 / hidden2 / hidden3

Трудно объяснить, но здесь я восстановил это: http://jsfiddle.net/UgbMx/

Как только я нажимаю кнопку SUBMIT, он смотрит, хорошо ли это 1 или 0. Затем он проходит через скрытые элементы. Он определяет, что элемент имеет значение 1 или 0. После этого он идет не так.

Answer 1

Удалите оператор var перед test_total внутри обратных вызовов, и все будет в порядке! Вы повторно объявляете переменную test_total в области действия каждого обратного вызова.

Итак, эта часть изменена (я усек комментарий для удобства чтения):

            if (test_total == "EMPTY") {
                test_total = $(this).attr("id") + "/SEPERATOR/";
            // In case the variable [...]
            } else {
                test_total = test_total + $(this).attr("id") + "/SEPERATOR/";
            }

Answer 2

Вы можете существенно сократить свое решение:

test_total = $(".test_item[value='1']").map(function() {
    return this.id;
}).get().join("/separator/");

Демо.

Answer 3

Остальные ответы совершенно верны, вы пересчитываете суммарные нагрузки теста. Код в целом может быть сокращен, хотя. Например.,

HTML

<input type="hidden" id="test1" class="test_item" value="0" />
<input type="hidden" id="test2" class="test_item" value="0" />
<input type="hidden" id="test3" class="test_item" value="0" />

<a href="#" class="HiddenFieldLink" data-hidden-field="test1">- Click me to check button 1</a><br />
<a href="#" class="HiddenFieldLink" data-hidden-field="test2">- Click me to check button 2</a><br />
<a href="#" class="HiddenFieldLink" data-hidden-field="test3">- Click me to check button 3</a><br />
<br /><br />
<a href="#" id="test_submit">Submit this</a>

Я поместил класс по ссылкам вместо идентификатора, удалил javascript href и дал элементам атрибут data, чтобы указать их соответствующее поле.

Javascript

$(document).ready(function() {
    // Text for button 1 clicked.
    $(".HiddenFieldLink").live('click', function(e) {
        var link = $(this),
            hiddenField = link.data('hiddenField');
        // BUTTON CLICKED
        $('#' + hiddenField ).val("1");
        // CHANGE TEXT
        link.text("Button clicked");

        e.preventDefault();
    });

    // The tricky party
    $("#test_submit").live('click', function() {
        var test_total = "EMPTY",
            entries = $.map($(".test_item"), function(item) {
                if(item.value === '1') {
                    return item.id;
                }
            });

        if(entries.length) {
            test_total = entries.join("/SEPERATOR/");
        }

        // Show me the output.
        alert("Variable test_total is now:\n" + test_total);
    });
});

Теперь нам нужен только один обработчик событий для всех ссылок, которые изменяют скрытые поля. Дополнительно e.preventDefault (); останавливает ссылку, пытаясь что-либо сделать (лучше, чем пустой javascript).

Наконец, я переключил оператор submit для использования функции jQuery $ .map (), которая возвращает массив элементов, возвращаемых функцией, предоставленной в качестве второго аргумента. После этого вы можете присоединиться к вашему разделителю.

Вот jsFiddle .

Answer 4

Вы объявили var test_total три раза.Вам необходимо удалить «var» из начала двух строк внутри каждого цикла.После того, как вы удалите это, он прекрасно работает ... как и следовало ожидать.

var test_total = "EMPTY";

    // Check every hidden element with the classname "test_item".
    $(".test_item").each(function() {

        // Check if the hidden element is changed to 1 (link clicked).
        if ($(this).val() == "1") {
            // In case the variable we just made is still EMPTY, empty it and add the ID + Seperator
            if (test_total == "EMPTY") {
                test_total = $(this).attr("id") + "/SEPERATOR/";
            // In case the variable is not EMPTY anymore, use the previous entries and add a new ID+Seperator
            } else {
                test_total = test_total + $(this).attr("id") + "/SEPERATOR/";
            }
            alert("Variable test_total is now:\n" + test_total);
        }

    });

Answer 5

Ваша проблема связана с областью, которую вы используете var, чтобы объявить новую область, таким образом сбрасывая переменную test_total см. обновленную скрипту для рабочей версии