Динамическое изменение текста в Radio Button Change с использованием jQuery для нескольких групп Radio

Question

Я занимаюсь разработкой приложения на Rails и столкнулся с проблемой, которую, похоже, не могу понять.

Я использую Аккордеон jQueryUI и создаю необходимую структуру, просматривая полученный массив.

Структура HTML, в которой нуждается аккордеон, следующая:

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div> <h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

Итак, я занимаюсь созданием уникальной радиогруппы в каждом контент-диве. Я хочу сделать так, чтобы, когда я выбираю опцию радио в одном из div контента, текст в заголовке h3 меняется на значение выбранной опции радио.

Я хочу использовать для этого jQuery, но я не совсем понимаю, как это сделать; В частности, мне трудно понять, какие селекторы использовать и как обращаться к брату h3, которому принадлежит радиогруппа div. Я также довольно озадачен тем, как справиться с этим для 11 различных радиогрупп на всей странице, каждая из которых находится внутри контентного блока.

Заранее спасибо.

Answer 1

Хорошо, вот что вы хотите сделать ...

$('input:radio').change(function(){
        $(this).parent().prev('h3').html($(this).val());
    });

Таким образом, каждый раз, когда изменяется «input: radio», jquery будет принимать $ (this) (переключатель, который вы нажали), подниматься до div его родителя (отсюда .parent ()), найти первый предыдущий h3 ( is .prev ('h3')), затем измените html на $ (this) .val (), который является значением переключателя, который вы нажали.

Обратите внимание, что если вы когда-либо добавите или что-то еще к входу, вам нужно будет добавить еще один .parent (), чтобы подняться еще на один уровень.

Также вы можете изменить .html () на что угодно ... html (), text (), ect ..