如何設置多個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");

例如。