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将引用单击的元素;按钮。因此，没有理由找到按钮.closest()，因为$(this).closest(".YesBTN")返回的内容与“YesBTN”处理程序中的$(this)完全相同。

另一方面，找到相应的“否”按钮将需要查找共同父项的DOM树，然后向下看树以查找另一个按钮：

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

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

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

例如。

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

1 个答案: