根据提供的 JQuery Snippet 修改 HTML

Question

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

JQuery 代码段：

$(".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 边框变为红色。

我正在尝试使用上面 sn-p 中给出的类名来修改 HTML。无法获得欲望输出。任何人都可以帮忙。

更新： 1) 如果没有必要；请尽量不要修改JQuery代码；但 HTML 代码在特定点击时我需要对整个问题行进行一些更改，例如问题的灰色、禁用其他收音机等。

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

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

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

1. 更新了 HTML 以使用 .scope-question 作为包装器

2. 为“否”单选按钮添加了data-require-comment 属性。

   • 我不确定您希望从中获得的确切用例，但您提供的代码表明此属性表明需要 cmets (duh)。因为您指出“否”应该将 textarea 变为红色，所以我附上它以了解。这当然表明，如果用户单击“是”，则可以不添加评论。不过，您可以修改它。

3. 添加了对 onload 更新函数的调用，该函数检查所有需要评论的输入，这些输入被检查以查看它们在评论框中是否有评论。

Answer 2

这是您更新后的JSFiddle

您只需删除 javascript each 函数并更改几个选择器