Question

我正在做一个自定义的无线电元素，它显示图像而不是普通的无线电。

基本的html就像：

<div id="wrap">
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
</div>

创建自定义广播：

$("#wrap").radio({someData});

我成功地创建了我需要的元素并显示了图像，我只是遇到了点击事件（代码的一部分）的一些问题：

var elems = [];
for (var i = 0; i < someData.length; i++) {
    elems.push({});


    elems[i].input = $(this).find("input").eq(i);                 // get input
    $("<div></div>").insertAfter(elems[i].input);                 // create a div to display image to
    elems[i].wrap = elems[i].input.next();
    elems[i].wrap.click(function(elem){
        console.log(elem);                                        // this console.log is triggered when the page load, not on click event
        elem.addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter.
    }(elems[i]));
}

我不明白为什么在脚本加载时触发console.log而不是点击事件。

同样console.log显示好的数据，但类更改仅适用于触发点击时elems[i]的最后一个元素。

我也尝试过不向click函数提供任何参数，只是直接使用elems[i]但它的行为相同，始终对elems的最后一个条目应用更改

Answer 1

我不明白为什么在脚本加载时触发console.log而不是点击事件。

因为您立即执行该功能。

elems[i].wrap.click(function(elem){
    console.log(elem);                                     
    elem.addClass('img-checked').removeClass('img-uncheked');
}(elems[i]));

最后查看(elems[i])？它调用该函数并将其返回值传递给.click。如果您单独定义函数，那么您可能会更加明显：

function foo(elem){
    console.log(elem);                                     
    elem.addClass('img-checked').removeClass('img-uncheked');
}
elems[i].wrap.click(foo(elems[i]));

现在应该更清楚为什么在页面加载时调用console.log。

如果你想捕获当前元素，我建议使用elems[i]作为event.data：

elems[i].wrap.click(elems[i], function(event){
    console.log(event.data);    
    // elem / event.data is not a jQuery object, so I don't know which element 
    // you wanted to target here
    elem.addClass('img-checked').removeClass('img-uncheked');
});

如果查看jQuery documentation for .click，您会看到它接受一个可选的eventData参数，该参数将作为event.data提供给事件处理程序。

Answer 2

 elems[i].wrap.click(function(elem){
        console.log(elem);                                        // this console.log is triggered when the page load, not on click event
        elem.addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter.
    }(elems[i]));

基本上是单击函数的参数表示事件。你再次传递一个元素作为点击函数的参数，但是点击一个函数指针。你不需要传递元素。你可以通过$（this）

访问元素

所以改变它

elems[i].wrap.click(function(event){
        console.log($(this));                                        // this console.log is triggered when the page load, not on click event
        $(this).addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter.
    });

使用jquery单击处理程序的奇怪行为

2 个答案: