用于克隆单选按钮的jQuery .show()和.hide()

时间:2015-08-12 20:51:19

标签: javascript jquery radio-button

我有一系列克隆的单选按钮。我想做一个简单的事情,如果选择相关的无线电,则显示特定的div,如果没有则隐藏。这是jQuery函数:

$clone.find('[id^="mov"]').each(function(){
    $(this).click(function(){
            $clone.find('[id^="l"]').each(function(){
            if ($(this).is(":checked")){
                $clone.find('[id^="linear"]').each(function(){
                $(this).show();
                });
            } 
            });
            $clone.find('[id^="c"]').each(function(){
            if ($(this).is(":checked")){
                $clone.find('[id^="circular"]').each(function(){
                $(this).show();
                });
            } 
            });
            $clone.find('[id^="r"]').each(function(){
            if ($(this).is(":checked")){
                $clone.find('[id^="rotacional"]').each(function(){
                $(this).show();
                });
            } 
            });
            $clone.find('[id^="m"]').each(function(){
            if ($(this).is(":checked")){
                $clone.find('[id^="mudanca_config_mao"]').each(function(){
                $(this).show();
                });
            }
            }); 
    });
});

我设法展示了我想要的div,但我似乎无法隐藏它们。当我为其他人做同样的事情时,它不会工作并停止显示div。

if ($(this).is(":checked")){
    $clone.find('[id^="linear"]').each(function(){
    $(this).show();
    });
}
else {
    $clone.find('[id^="linear"]').each(function(){
    $(this).hide();
    });
}

此外,我知道这个功能有点重复和混乱,所以如果有人有更好,更干净的方式,我可以接受建议。我是jQuery的新手,还在学习:)非常感谢你!

1 个答案:

答案 0 :(得分:1)

如果没有看到你的HTML,很难看出问题是什么。但是,你的JavaScript绝对可以收拾整齐。以下内容应与您问题中的JavaScript相同。

$clone.find('[id^="mov"]').on('click', function(){
    $clone.find('[id^="linear"]').toggle(
        $clone.find('[id^="l"]').is(':checked'));
    $clone.find('[id^="circular"]').toggle(
        $clone.find('[id^="c"]').is(':checked'));
    $clone.find('[id^="rotacional"]').toggle(
        $clone.find('[id^="r"]').is(':checked'));
    $clone.find('[id^="mudanca_config_mao"]').toggle(
        $clone.find('[id^="m"]').is(':checked'));
});