Question

如果我想在点击.dependent-box时创建一个隐藏.radio-click-hide部分的事件，我将如何遍历这些元素以实现这一目标？我已经尝试过了，但它没有工作：

jQuery(function ($) {
    $('.radio-click-hide').on("click", function (e) {
       $(this).closest('.dependent-box').hide() 
    });
});

此外，我的整个程序中有很多这样的内容，因此需要定位最接近的.dependent-box

<table>
    <tr class="form-group">
        <td class="form-label">
            @Html.LabelFor(model => model.IsAchievedByLiveMeeting, htmlAttributes: new {@class = "control-label"})
        </td>
        <td class="form-input">
            @Html.RadioButtonFor(model => model.IsAchievedByLiveMeeting, true, new { @class = "radio-click-hide" }) Yes
            @Html.RadioButtonFor(model => model.IsAchievedByLiveMeeting, false, new { @class = "radio-click-show" }) No
            @Html.ValidationMessageFor(model => model.IsAchievedByLiveMeeting, "", new {@class = "text-danger"})
        </td>
    </tr>
    <tr class="form-group dependent-box">
        <td class="form-label"></td>
        <td class="form-input">
            @Html.LabelFor(model => model.LiveMeetingExplaination, htmlAttributes: new {@class = "control-label"})
            @Html.EditorFor(model => model.LiveMeetingExplaination, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.LiveMeetingExplaination, "", new {@class = "text-danger"})
        </td>
    </tr>
</table>

Answer 1

closest()单独工作，因为.dependent-box元素是复选框的父tr的兄弟。试试这个：

$('.radio-click-hide').click(function() {
    $(this).closest('tr').next('.dependent-box').hide()  
});

DOM Traversal找到父母的兄弟姐妹

1 个答案: