如何设置多个div的样式并更改onclick的隐藏值？

Question

在我的网页上，我有一个包含多行的表格。 每行包含相同的项目：-一个标题带有隐藏的输入-一个div的功能类似于是按钮-一个div的功能类似于无按钮

我要实现的目标是，当用户单击“是按钮”时，此DIV的样式将更改为“已选择”，而“无按钮”的样式将被删除（恢复为正常）。 另外，隐藏输入的值需要设置为“是”。

当用户单击“无按钮”时，与上面相同，只是这一次相反（相反），并且隐藏的输入值将设置为“否”。

我需要JavaScript来找出对应的INPUT和DIV，以防所有隐藏输入都已设置并且所有DIV都已更改。 Javascript需要找到最接近的DIV和INPUT。

到目前为止，我所做的只是更改了单击的DIV，但没有删除其他DIV的类，也没有更改隐藏输入的值。

<table width="100%">
            <tr>
                <td>
                    Intern
                    <input type="hidden" name="intern" class="inp-hid">
                </td>
                <td class="profielEditTD">
                    <table>
                    <tr>
                    <td>
                    <div class="YesBTN"></div>
                    </td>
                    <td>
                    yes
                    </td>
                    <td>
                    &nbsp;
                    </td>
                    <td>
                    <div class="NoBTN"></div>
                    </td>
                    <td>
                    no
                    </td>
                    </tr>
                    </table>
                </td>
            </tr>
        </table>

<script type="text/javascript">
$(document).ready(function(){
    $(".YesBTN").click(function(){
        $(this).closest(".YesBTN").toggleClass("YesYES");
        $(this).parent(".NoBTN").removeClass("NoYES");
        $(this).parent(".inp-hid").value = "yes"
    });

    $(".NoBTN").click(function(){
        $(this).closest(".NoBTN").toggleClass("NoYES");
        $(this).parent(".YesBTN").removeClass("YesYES");
        $(this).parent(".inp-hid").value = "no"
    });
});

</script>

Answer 1

在事件处理程序中， this将引用clicked元素。 按钮。 因此，没有理由找到带有.closest()的按钮，因为无论如何$(this).closest(".YesBTN")返回的内容与“ YesBTN”处理程序中的$(this)完全相同。

另一方面，找到相应的“否”按钮将需要在DOM树中查找一个公共父级，然后在该树中向下查找另一个按钮：

$(this).closest(".profielEditTD").find(".NoBTN").removeClass("NoYES");

从您的问题中的HTML尚不清楚，但是要找到该输入字段，我认为您必须使用其名称：

$("input[name='intern']").val("yes");

例如。