0

使用 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/

4

2 回答 2

2

您需要使用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 示例

于 2013-07-17T19:48:52.187 回答
0

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

toggle = jQuery(this);

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

于 2013-07-17T19:53:35.360 回答