Question

我正在尝试根据以下jQuery Snippet中的类名修改我的HTML。片段添加到texarea的类，它将边框变为红色

JQuery Snippet：

$(".scope-question .commentbox").removeClass("redColor")
$(".scope-question input[data-require-comment]:checked").each(function() {
$(this).closest(".scope-question").find(".commentbox").addClass("redColor");
});

小提琴： https://jsfiddle.net/t23un23y/

有四个问题，3个收音机框作为答案（是/否/不适用）和备注的文本区域。单击特定的收音机，说“否”，textarea边框变为红色。

我正在尝试使用上面代码段中给出的类名来修改HTML。无法获得欲望输出。有人可以帮忙吗。

更新： 1）如果没有必要;请尽量不要修改JQuery代码;但HTML代码特别点击我需要在整个问题行中进行一些更改，如灰色问题，禁用其他无线电等。

2）我刚刚为收音机的onClick创建了小提琴，我也有用例来验证加载时的红色textarea。所以也请考虑案例

Answer 1

更新小提琴：Here

基本上，您的代码假定.scope-question是输入的父级，而实际上它是他们父母的兄弟。

$('input[type="radio"]').click(function () {
    var textarea = $(this).closest("div").next(".scope-question").find(".commentbox");
    if($(this).val() === "No") {
        textarea.addClass("redColor");
    }
    else {
        textarea.removeClass("redColor");
    }
});

<强>更新

Detailed Fiddle

以下是我所做更改的摘要：

更新了HTML以使用.scope-question作为包装器
在“NO”单选按钮中添加了data-require-comment属性。
- 我不确定您想要的确切用例，但您提供的代码表明此属性表明需要注释（duh）。因为你表示“NO”应该把textarea变成红色，所以我把它附上来知道。这当然表明，如果用户单击是，则可以不添加注释。但是你可以修改它。
添加了对onload的更新函数的调用，该函数检查所有需要注释的输入，检查它们是否在注释框中有注释。

Answer 2

这是您更新的JSFiddle

您只需删除javascript each功能并更改少数选择器

根据提供的JQuery Snippet修改HTML

2 个答案: