javascript - 当所有 具有相同的类时，如何在单击单选按钮时显示/隐藏一个 ？

Question

我有这个 JavaScript 代码:

$("#midden-offertes form .subvragen").hide();

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    if (this.value === 'Ja')
    { 
        $("#midden-offertes form .subvragen",this).show()
    }
    else
    {
        $("#midden-offertes form .subvragen",this).hide();
    }
});

我还有一个<form>具有不同的单选按钮。当我单击单选按钮时，.subvragen <div>必须显示。

但是每个.radio按钮有自己的.subvragen <div> 。我如何更改此 JavaScript 代码，以便只有 .subvragen当我单击该单选按钮时，会显示每个单选按钮中的内容吗？

当我现在单击单选按钮时，所有 .subvragen <div>显示了。

编辑:
我已经上传了文件。您可以在这里看到它们:http://mikevierwind.nl/karel/offerterelatie.html

Answer 1

查看the HTML you’ve got ，您可以使用以下 JavaScript(我认为):

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    var $subvragen = $(this).parents('.veld').siblings('.subvragen');

    if (this.value === 'Ja')
    { 
        $subvragen.show();
    }
    else
    {
        $subvragen.hide();
    }
});

或者，如果您可以添加 id属性到您的subvragen <div>和 radio ，你可以使用它们——它会让 JavaScript 减少对 HTML 嵌套的依赖。

例如如果你的 HTML 是这样的:

<div id="midden-offertes">
    <form>
        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_1" value="a" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_1"></div>

        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_2" value="b" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_2"></div>

        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_3" value="c" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_3"></div>
    </form>
</div>

然后你的 JavaScript 会像这样:

$("#midden-offertes form .subvragen").hide();

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    if (this.value === 'Ja')
    { 
        $(".subvragen#subvragen_" + this.id).show()
    }
    else
    {
        $(".subvragen#subvragen_" + this.id).hide();
    }
});