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

Question

我有一系列克隆的单选按钮。我想做一件简单的事情，如果选择了相关的 radio 则显示特定的 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，但我似乎无法隐藏它们。当我对 else 执行相同的操作时，它将不起作用并停止显示 div。

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

另外，我知道这个函数有点重复和困惑，所以如果有人有更好、更干净的方法，我愿意接受建议。我是 jQuery 新手，仍在学习:) 非常感谢!

Answer 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'));
});