Как я могу показать / скрыть одну <div>, когда нажата радиокнопка, когда все <div>имеют одинаковый класс?

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>.

Edit:
Я загрузил файлы. Вы можете увидеть их здесь: 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 <div> s и радио, вы могли бы использовать их - это сделало бы 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();
    }
});