Javascript/jQuery问题

我正在尝试制作单选按钮，当它们处于活动状态时，它会显示下拉菜单。我已经可以让它显示，但是当我点击另一个单选按钮，它显示了一个，但并不能掩盖其他的... 代码：Javascript/jQuery问题

<input type='radio' name='op' onchange='$("#ban_length").fadeToggle();'/> 
<input type='radio' name='op' onchange='$("#rank_list").fadeToggle();'/>

来源

2012-01-13 Jode

他们是相同的''

是的，他们是相同的的成员。 – Jode 2012-01-13 22:30:55

如果你已经有jQuery，我不会使用内联JavaScript。请在这里显示其他相关代码。 – Sparky 2012-01-13 22:33:59

JavaScript部分：

$(document).ready(function() { 
    $('#op1').change(function(){ 
     $("#ban_length").fadeIn(); 
     $("#rank_list").fadeOut(); 
    }); 
    $('#op2').change(function(){ 
     $("#ban_length").fadeOut(); 
     $("#rank_list").fadeIn(); 
    }); 
});

HTML：

<input type='radio' name='op' id='op1'/> 
<input type='radio' name='op' id='op2'/> 

<div id="ban_length">demo</div> 
<div id="rank_list">demo</div>

演示：

http://jsfiddle.net/b2UPt/1/

来源

2012-01-13 22:42:48 Sparky

<input type='radio' name='op' onchange='$("#ban_length").fadeIn();$("#rank_list").fadeOut();'/> 
<input type='radio' name='op' onchange='$("#rank_list").fadeIn();$("#ban_length").fadeOut();'/>

虽然我会建议删除的JavaScript从元素本身，给他们id s和添加JavaScript到一个单独的脚本与$(theID).change(function(){...。

或者，如果您希望他们立即隐藏，则可以使用hide而不是fadeOut。

还有最后一条建议。如果这些元素中有很多而不是2个，我会为每个元素添加一个共享类，然后在每个元素上代替hide，只需调用$(".className").hide()即可隐藏任何可见的元素。

来源

2012-01-13 22:33:16

-1

添加ID = “禁令” 和id = “等级” 你的收音机

在jQuery的部分

，点击处理程序添加到单选按钮

$(':radio').click(function() { 
    if ($(this).attr("id") == "ban") $("ban_length").fadeToggle(); 
    if ($(this).attr("id") == "rank") $("rank_length").fadeToggle(); 
});

来源

2012-01-13 22:39:14 sonjz

change的事件仅被点击的元素上触发（即现在启用的单选按钮）。当单选按钮被自动禁用时它不会被触发。

所以你需要检查每一次他们中的一个触发change事件中的所有单选按钮。你需要能够告诉他们分开，虽然如此，给他们id先从：

<input type="radio" name="op" id="radio_ban_length" /> 
<input type="radio" name="op" id="radio_rank_list" />

之后，你可以用它们来切换正确的下拉菜单：

$('input:radio').change(function() { 
    var id = $(this).attr("id"); 

    if (id === "radio_ban_length") { 
     $("ban_length").fadeIn(); 
     $("rank_list").fadeOut(); 
    } else { 
     $("rank_list").fadeIn(); 
     $("ban_length").fadeOut(); 
    } 
});

另外，如果你喜欢挑战，或者你可能有两个以上的无线的，你可以使用filter()和:checked做这样的事情：

function getDropdownId(radioId) { 
    return '#' + radioId.replace(/^radio_/, ''); 
} 

var radios = $('input:radio'); 

radios.change(function() { 

    // Checked radio's: 
    radios.filter(':checked').each(function(){ 
     var id = getDropdownId($(this).attr('id')); 
     $(id).fadeIn(); 
    }); 

    // Unchecked radio's: 
    radios.filter(':not(:checked)').each(function(){ 
     var id = getDropdownId($(this).attr('id')); 
     $(id).fadeOut(); 
    }); 
});

不e该方法确实依赖于与下拉菜单的id相匹配的单选按钮的id（例如， radio_ban_length for ban_length）。

更新：这里是一个活生生的例子：http://jsfiddle.net/55ANB/1/

来源

2012-01-13 22:43:37 PPvG

回答

相关问题