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

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

我还有一个带有不同单选按钮的

。当我单击单选按钮时，必须显示 .subvragen

。

但每个 .radio 按钮都有自己的 .subvragen

。如何更改此 JavaScript 代码，以便当我单击每个单选按钮时仅显示每个单选按钮中的 .subvragen？

现在，当我单击单选按钮时，将显示所有 .subvragen

。

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

Answer 1

查看您获得的 HTML，您可以使用以下 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

和收音机中，您就可以使用它们 - 它会使 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();
    }
});