包含选择器的 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

另外，我还需要解决命名空间事件。

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");
  });
  
});