-1

我正在使用带有 2 个单选按钮的 JQuery 在显示和隐藏 2 个不同的 div 之间切换。我还希望能够检查页面加载（或重新加载）时的当前值，并根据当前选择的内容设置 div 的显示/隐藏状态。

换句话说，单击时执行此操作，如果不是单击，则执行当前设置的任何操作。我有这个似乎工作正常的代码

var type_option = $('input[name=Type]:checked', '#Form').val();
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

<form>
<input type="radio" name="Type" value="A" class="TypeSelect">
<input type="radio" name="Type" value="B" class="TypeSelect">

<div id="A">A Div</div>
<div id="B">B Div</div>
</form>

但这似乎并不正确或至少非常优化。我认为这可能有效

var type_option = $('input[name=Type]:checked', '#Form').val();
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
});
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}

但它没有，我假设我必须在点击功能中设置这些 div？有没有更好的方法我应该这样做，或者我是否必须进行检查并在点击功能和点击功能之外设置 div 以执行我想要的操作。

4

4 回答 4

1

我会将逻辑移动到一个函数中，然后在页面加载和点击事件中调用它。像这样的东西。

function toggle()
{
    var type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
}
toggle();
$(".TypeSelect").click(function() {
    toggle();
});
于 2012-05-07T18:04:34.357 回答
0 
$(".TypeSelect").click(function() {
    if (this.value == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

取决于页面的初始状态，它甚至可以简单得多：

$(".TypeSelect").click(function() {
    $('#A, #B').toggle(); // Hide visible element, Show hidden element.
});
于 2012-05-07T17:27:56.497 回答
0

为什么隐藏一个以显示另一个为什么不只是将显示设置为无，然后这样做，两者都不会同时坐在那里

<div id="A" style="display: none;">A Div</div>
<div id="B" style="display: none;">B Div</div>

    $(".TypeSelect").click(function() {
        type_option = this.value;
        if (type_option == 'A') {
            $("#A").show();
$("#B").hide();
        } else {
$("#A").show();
            $("#B").show();         
        }
    });
于 2012-05-07T17:32:06.650 回答
0 
function togglify(opt) {
  $('div#' + opt).show().siblings('div').hide();  
}
$(".TypeSelect").click(function() {
    type_option = $(this).val();
    togglify(type_option);
}).filter(function() {
    type_option = $(':checked').val();
    togglify(type_option);
});

演示

于 2012-05-07T17:59:11.383 回答