1

我对这段代码有疑问：

jQuery(".cb-disable").click(function(){
var parent = jQuery(this).parents('.switch');
var vid =this.id;
jQuery('#'+vid).attr('id','');
jQuery('#'+vid).attr('id','');
jQuery('.cb-enable',parent).removeClass('selected');
jQuery(this).addClass('selected');
jQuery('input[name='+vid+'-off]').attr('checked', true)
jQuery('input[name='+vid+'-on]').removeAttr('checked');
jQuery('input[name='+vid+']').attr('name', vid+"-on");
jQuery('input[name='+vid+'-off]').attr('name', vid);
});
});

因为此代码对于下面的示例代码是正确的。

<p class="wpptabs_hoverable-286 switch">
    <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
    <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286-off" value="off">
    <label for="ON" id="" class="cb-enable"><span>ON</span></label>
    <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

但这是不正确的。你能帮助我吗？此代码基于http://devgrow.com/iphone-style-switches/ 用于 php 在表格列中生成复选框。我有一个问题：“这个 javascript 代码有什么问题？”。对不起我的英语，但我很少用这种语言写作

4

1 回答 1

0

每个无线电输入的名称必须相同，否则它们会独立运行（意味着它们可以同时显示开启和关闭状态）——在下面的代码中，我删除-off了关闭无线电名称中的部分：

<p class="wpptabs_hoverable-286 switch">
  <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
  <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286" value="off">
  <label for="ON" id="" class="cb-enable"><span>ON</span></label>
  <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

您可以在此处看到打开和关闭按钮现在按预期工作：

http://jsfiddle.net/S8qFT/

更新

似乎让收音机工作并不是您唯一的问题。我已经简化了 javascript，所以它只做它需要做的事情，它现在应该可以按照你的要求工作。

http://jsfiddle.net/65JRx/

javscript

/// make sure we apply the click handling to both on and off labels
$(".cb-enable,.cb-disable").click(function(){
    /// find the elements we need
    var self = $(this);
    var parent = self.parents('.switch');
    /// handle the selected highlight, first remove all selected
    parent.find('.selected').removeClass('selected');
    /// then select the right one again
    self.addClass('selected');
    /// most modern browsers should handle transfering the label click
    /// to the actual radio (via `for` and `id`), but just in case.
    if ( self.is('.cb-enable') ) {
        parent.find('input[value=on]').prop('checked', true);
    }
    else {
        parent.find('input[value=off]').prop('checked', true);
    }
});

标记

<div class="wpptabs_hoverable-286 switch">
    <!-- I've laid these inputs out just to make them
    easier to read, I wouldn't normally lay markup out
    this way //-->
    <input 
        type="radio" 
        class="on286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-on" 
        value="on" 
        checked="checked"
    />
    <!-- I've renamed your IDs to have more specific names
    this will mean you can use this method on more than
    one set of inputs -- as long as you keep the IDs inline
    with your id convention. //-->
    <input 
        type="radio" 
        class="off286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-off" 
        value="off" 
    />
    <label 
        for="wpptabs_hoverable-286-on"
        class="cb-enable selected">
        <span>ON</span>
    </label>
    <label 
        for="wpptabs_hoverable-286-off"
        class="cb-disable">
        <span>OFF</span>
    </label>
</div>

css

/**
 * Added a highlight so you can see selected working
 */
label.selected { color: blue; }

/** 
 * I've removed the display none so you can still see the inputs
 * working as they should. Obviously you can put the display none
 * back to get your working version.
 */
.switch input{/*display: none;*/ opacity: 0.5; position: relative;}
于 2013-03-25T09:46:22.113 回答