javascript - jquery 使用复选框来切换同一个 div 中的元素

Question

我正在开发一个 Rails 4 应用程序，其中一个 Trainer 嵌套了 Sportists，这些运动员可以选择他们想参加的学科参与，但在这样做时，他们还必须指出他们在该学科的个人和季节性记录。

.field
    = f.label :m100, "100 m"
    = f.check_box :m100, :as => :boolean, :class => "m100check checkbox"
    .field.discip.m100rec.persrec
      = f.label :m100rec, "Personal record 100m"
      = f.text_field :m100rec, :placeholder => "00,00", :class => "m100recinput t0000"
    .field.discip.bestm100.bestresult
      = f.label :bestresultm100, "Seasonal record 100m"
      = f.text_field :bestresultm100, :placeholder => "00,00", :class => "bestresultm100 t0000"

haml 部分看起来像这样，只要用户单击 .checkbox，我就想隐藏 .discip div > 给定的 .field div 中的复选框。如何使用 jQuery 做到这一点？

到目前为止，我已经这样做了，但它不起作用:

function show_rec () {
    $('.checkbox').click(function() {
        console.log($(this).parent('div.field > div.discip'));
        $(this).parent('div.field > div.discip').toggle();
    });
}

JSFiddle:http://jsfiddle.net/24Fpg/

Answer 1

您正在尝试通过一个命令在 DOM 中上下导航。您需要使用 closest(或 parent - 请参阅注释)找到祖先，然后使用 find 找到后代:

JSFiddle:http://jsfiddle.net/24Fpg/2/

$(document).ready(function () {
    function show_rec() {
        $('.checkbox').click(function () {
            $(this).closest('div.field').find('div.discip').toggle();
        });
    }
    show_rec();
});

注意:如果您知道它是直接父级，则可以使用 parent 而不是 closest，但是 closest 在 HTML 中更稳定变化。

如果内容是动态加载的，切换到委托(delegate)的事件处理程序:

$(document).ready(function () {
    function show_rec() {
        $(document).on('click', '.checkbox', function () {
            $(this).closest('div.field').find('div.discip').toggle();
        });
    }
    show_rec();
});

它的工作原理是监听冒泡回一个不变的祖先的事件，然后对该事件链中的元素应用 jQuery 选择器，然后调用函数 < em>对于导致事件的每个匹配元素。

document 是默认的回退，如果没有更近的东西的话。切勿将“body”与委托(delegate)事件处理程序一起使用，因为 body 不能正常处理点击事件(因为样式)。

更新:

如果 show_rec 没有被其他任何东西调用(看起来不是)，你可以简化为:

jQuery(function($){
    $(document).on('click', '.checkbox', function () {
        $(this).closest('div.field').find('div.discip').toggle();
    });
});