Question

我想在这里取得成就。单击链接后，为该链接指定的隐藏元素的值将设置为1（默认为0）。这很好。

下一步，我循环遍历所有隐藏元素，看看哪些被设置为1.如果设置为1，我将其ID添加到变量。下一个设置为1，其ID需要放在它后面的同一个变量中。

因此具有ID的变量应如下所示：hidden1 / hidden2 / hidden3

很难解释，但在这里我重建了它： http://jsfiddle.net/UgbMx/

一旦我点击SUBMIT按钮，它会查找它是1还是0就好了。然后它循环隐藏元素。它重新认识到元素要么设置为1还是0.之后就会出错。

Answer 1

在回调中删除test_total之前的var语句，你会没事的！您将在每个回调范围内重新声明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/");

Demo.

Answer 3

您的问题与您使用var声明新范围的范围有关，因此重置变量test_total请参阅the updated fiddle for a working version

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

其他答案完全正确，您将重新确定测试总负载。一般来说，代码可能会缩小。如，

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

我在链接上放了一个类而不是ID，删除了javascript href并给了一个数据属性项来指示它们的匹配字段。

<强>的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。

jQuery检查隐藏的元素并使用其数据

5 个答案: