Question

使用jQuery我正在改变一个无线电输入（即切换开关）颜色，当它在绿色时，当它是黑色时...

小提琴： http://jsfiddle.net/SDhfp/1/（只有第一个，颜色变化“响应”但另一个只在第一个变化时发生变化..它不是自己的变化功能）

以下是HTML：

<fieldset class="buttonset">
  <span class="toggle-bg" id="responsive" style="background-color: rgb(70, 182, 146);">

  <input type="radio" checked="checked" value="1" class="switch-input" name="responsive" id="responsive_0">
  <input type="hidden" value="responsive" class="switch-id-value">

  <input type="radio" value="0" class="switch-input" name="responsive" id="responsive_1">
  <input type="hidden" value="responsive" class="switch-id-value">

  <span class="switch ui-buttonset"></span></span>
</fieldset>

name value和input id都是动态的，因此另一个切换单选按钮的name value和input id将是唯一的...

这是jQuery：它只针对第一个单选按钮，恰好是上面的标记responsive这是我拥有的众多按钮中的第一个单选按钮。

jQuery('.toggle-bg').on('change', function () {
var value  = jQuery('.toggle-bg input.switch-id-value').val(),
    moon1  = jQuery('#' + value + '_0').is(':checked'),
    slider = jQuery('._moon_staticarea_height'),
    toggle = jQuery('.toggle-bg ');

toggle.css('background-color', (moon1 ? '#46b692' : '#333'));
slider[moon1?'slideUp':'slideDown']();
}).trigger('change');

我无法弄清楚如何只更改动态创建的按钮的ID？我尝试制作元素选择器输出...

小提琴： http://jsfiddle.net/SDhfp/1/

Answer 1

您需要使用this而不是在事件中引用该类。

jQuery('.toggle-bg').on('change', function () {
    var value = jQuery('input.switch-id-value',this).val(),
        moon1 = jQuery('#' + value + '_0').is(':checked'),
        slider = jQuery('._moon_staticarea_height'),
        toggle = jQuery(this);

    toggle.css('background-color', (moon1 ? '#46b692' : '#333'));
    slider[moon1 ? 'slideUp' : 'slideDown']();
}).trigger('change');

<强> jsFiddle example

Answer 2

http://jsfiddle.net/Ultimate/SDhfp/7/

toggle = jQuery(this);

在您通过该ID获取所有内容之前，使用此功能会有所帮助。

更改所有单选按钮，我的代码只更改第一个？

2 个答案: