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

Question

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

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

所以带有ID的变量应该看起来像：hidden1/hidden2/hidden3

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

一旦我单击“提交”按钮，它就会查找是否是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/");

演示。

Answer 3

您的问题在于您使用 var 声明新范围的范围，从而重置变量 test_total 请参阅 工作版本的更新小提琴

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 并为项目提供了 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 更好）。

最后，我将提交语句切换为使用 jQuery $.map() 函数，这会返回从作为第二个参数提供的函数返回的项目数组。然后可以将其与您的分隔符连接起来。

这是 jsFiddle。