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>属性，则可以使用它们 - 这会使JavaScript不再依赖于HTML嵌套。< / p>

E.g。如果您的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();
    }
});

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

1 个答案: