Javascript/jQuery issue

Javascript/jQuery issue

本文关键字：issue jQuery Javascript      更新时间：2023-09-26

我正在尝试制作单选按钮，当它们处于活动状态时，它会显示下拉列表。我已经可以显示它了，但当我点击另一个单选按钮时，它会显示一个，但不会隐藏另一个。。。代码：

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

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/

<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，并用$(theID).change(function(){...将javascript添加到一个单独的脚本中。

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

还有最后一个建议。如果有很多这样的元素，而不仅仅是2个，我会为你正在淡入的每个元素添加一个共享类。然后，不在每个元素上使用hide，只需调用$(".className").hide()来隐藏任何可能可见的元素。

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();
    });
});

请注意，此方法确实依赖于与下拉菜单的id相匹配的单选按钮的id（例如，ban_length的radio_ban_length）。

更新：这是一个的实时示例：http://jsfiddle.net/55ANB/1/

将id="ban"和id="rank"添加到您的无线电

在jquery部分，将单击处理程序添加到单选按钮

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