jquery - 过滤元素“单击”事件后的jquery给出了错误的控制台编号

Question

在我的页面中，我没有复选框，我将它们过滤为 2 个类别。如果我的值等于我的服务器值，我将添加一个类..元素的第 1 部分（5 个元素）。其余的是元素的第 2 部分。

如果我单击元素的第 2 部分，则该功能为控制台提供次数（我添加了 5 次类）.. 这是什么原因，我该如何避免这种情况..

这是我的功能：

 var sv = [];
var userLocales = $('input[type="checkbox"]', "form").filter(function() {
    return $(this).val() === value["name"];
}).prop("checked", true).addClass("userLocales").on("change", function() {
    console.log($(this).prop("class"));
});
var plainLocales = $('input[type="checkbox"]', "form").filter(function() {
    return $(this).hasClass("userLocales") !== true;
}).on("change", function() {
    console.log("i am fresh"); //consoling 5 times..
});

Answer 1

我在下面的例子中得到了这个工作，看看它是否能解决你的问题。

示例 HTML：

<form>
   <input type="checkbox" name="checkbox1" value="Aus" />
   <input type="checkbox" name="checkbox2" value="US" />   
</form>

示例 JS：

var serverValue  = { name: "US" };

var userLocales = $('input[type="checkbox"]', "form")
    .filter(function() {
        return $(this).val() === serverValue["name"];
    })
    .prop("checked", true)
    .addClass("userLocales").on("change", function() {
        console.log($(this).prop("class"));
    });

var plainLocales = $('input[type="checkbox"]', "form")
    .filter(function() {
        return $(this).hasClass("userLocales") !== true;
    })
    .on("change", function() {
        console.log("i am fresh");
    });

示例小提琴