Question

我有一个表单设置，它使用DIV作为复选框的切换。我有一些jQuery代码可以观察DIV的点击，然后切换类来更改图像。容易腻，对吧？

我让一切都运行得很好，但是当我使用复选框加上产品选项定价时（由我使用的表单和购物车的插件所指示），jQuery不起作用。

我假设有另一个类，或与定价构造相关的东西，覆盖代码，但DIV在工作版和非工作版之间看起来是同一的。我对正在发生的事情感到茫然 - jQuery应该仍然可以根据我所看到的情况发挥作用。

您可以在此处查看表单：http://bit.ly/YZBdbc

我已经发布了两个复选框示例，因此您可以看到差异（在“选择您的选项”下）。最上面的一个按照我的视觉效果工作，但不会增加定价，底部的不会切换，但定价有效。 叹息。

提前感谢您的帮助！

编辑：这是jQuery代码：

jQuery('#cart_option_1').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_2').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_3').click(function() {
    jQuery(this).toggleClass('active');
});

这是工作区的DIV代码：

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_25'><li class='gchoice_25_1'><input name='input_25.1' type='checkbox' value='Month-to-Month +$10.00' id='choice_25_1' tabindex='2' /><label for='choice_25_1'><div id="cart_option_1b"></div></label></li>

来自非工作块的代码（基本相同）：

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_26'><li class='gchoice_26_1'><input name='input_26.1' type='checkbox' value='Month-to-month|10' id='choice_26_1' tabindex='5' /><label for='choice_26_1'><div id="cart_option_1"></div></label></li>

Answer 1

让它成为一个班级。

<div class="cart_option" id="cart_option_1"></div>

然后将click事件应用于该类。

$('.cart_option').on('click',function(){
    $(this).toggleClass('active');
});

编辑澄清：您仍然可以将唯一的图片应用于cart_option_1，cart_option_1b，无论如何，但点击事件适用于所有人，因为他们都有关联的类。

jQuery切换不适用于表单上的图像/复选框

1 个答案: