使用 jQuery 动态更改单选按钮上的文本更改多个单选组

Question

我正在开发一个 Rails 应用程序，但遇到了一个我似乎无法解决的问题。

我正在使用 jQueryUI Accordion，并通过循环遍历我得到的数组来构建必要的结构。

手风琴所需的 HTML 结构如下：

第一个标头

第一个内容

第二个标头

第二个内容

所以我正在做的是在每个内容 div 中创建一个独特的单选组。我想要这样做，以便当我在内容 div 之一中选择单选选项时，h3 标头中的文本将更改为所选单选选项的值。

我想为此使用 jQuery，但我对如何使用感到困惑；具体来说，我很难理解要使用哪些选择器以及如何引用单选组 div“所属”的 h3 header 同级。我也很困惑如何处理整个页面上 11 个不同的无线电组，每个无线电组都位于一个内容 div 中。

提前致谢。

Answer 1

好的，这就是你想要做的...

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

因此，每当“input:radio”更改时，jquery 都会采用 $(this) （你单击的单选按钮），转到其父级的 div （因此 .parent() ），找到前一个 h3 （即 .prev('h3')），然后将 html 更改为 $(this).val()，这是您单击的单选按钮的值。

请注意，如果您在输入周围添加一个或更多内容，则必须添加另一个 .parent() 才能再上一层。

您也可以将 .html() 更改为您想要的任何内容... html()、text() 等。