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部分看起来像这样，只要用户点击给定.discip div中的.checkbox复选框，我就会隐藏.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更改中更稳定。

如果内容是动态加载的，请切换到委派的事件处理程序：

$(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”与委派的事件处理程序一起使用，因为body无法正常处理点击事件（因为样式）。

更新

如果show_rec没有被其他任何东西调用（它似乎不是），你可以简化为：

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

Answer 2

<强>编辑：

试试这个：http://jsfiddle.net/24Fpg/1/

$(document).ready(function () {
 $(document).on('change','.checkbox',function() {
        $('.discip').toggle();
    });
});

Answer 3

无需将click处理程序包装在函数内部。
您应绑定change处理程序，而不是click处理程序。例如，如果用户通过键盘切换复选框的状态，则不会触发该事件。
您应根据复选框的状态设置.discip的可见性。如果默认情况下选中了复选框，则当前代码的效果与您想要的效果相反（.discip将在未选中复选框时显示，并在选中复选框时隐藏）。

示例：

$('.checkbox').on('change', function() {
    $(this).closest('.field').find('.discip').toggle( this.checked ); 
}).change();

Here's a fiddle

Answer 4

我不知道Rails 4.问题看起来像是javascript并试图解决。

如果必须在第一次单击页面加载时执行绑定，则绑定不应该起作用。所以，

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

如果以上没有成功，请与父母而不是父母一起尝试，即

$(this).parents('div.....

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

4 个答案:

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

更新

Here's a fiddle