包含选择器的jQuery变量未按预期工作

Question

我试图使用jQuery和Bootstrap Switch插件隐藏页面的一部分。我有以下代码。

jQuery("[name='toggle-show-hide']").on('switchChange.bootstrapSwitch', function() {
    var id = jQuery(this).attr("data-wrapper-class");
    console.log(id)
    jQuery('.column-'+id+' .finished-reading').hide( "slow" );
    console.log ('.column-'+id+' .finished-reading')
});

在控制台中，我得到了正确的id以及选择器，在一种情况下是.column-56 .finished-reading。但是，.hide()无法正常工作，div.column-56 .finished-reading无法隐藏。

这是HTML标记。

<div class="col-xs-12 column-56">
    <div class="col-xs-12 column-56-header"><input type="checkbox" name="toggle-show-hide" data-size="mini" checked="checked" data-label-text="Show Read" data-wrapper-class="56"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 finished-reading">I'm done with this.. So hide!</div>
    <div class="col-xs-12 col-sm-6 col-md-4">I'm not done with this.. So show!</div>
    <div class="col-xs-12 col-sm-6 col-md-4">I'm not done with this.. So show!</div>
</div>

http://jsfiddle.net/epnbgbLm/

Answer 1

当您将事件处理程序更改为change

时，这似乎有效

jQuery("[name='toggle-show-hide']").on('change', function() { ... }

http://jsfiddle.net/sean9999/h9e77sca/4/

Answer 2

问题不在于jquery！

您正在收听未触发的事件switchChange.bootstrapSwitch。

从＆＃39; switchChange.bootstrapSwitch＆＃39;更改事件名称改变＆＃39; /＆＃39;点击＆＃39;

jQuery("[name='toggle-show-hide']").on('change', function() { ... }

Answer 3

另外，我得到了命名空间事件。

DEMO

$(function() {
  var $switch = $('[name="toggle-show-hide"]');

  $switch.bootstrapSwitch();

  $switch.on('switchChange.bootstrapSwitch', function(e, state) {
    var id = $(this).attr("data-wrapper-class");

    $('.column-'+id+' .finished-reading')[state ? 'hide': 'show']("slow");
  });

});