Question

我有两个标签，一个叫做Sale-Items，另一个是All-Items，每个标签是一个关联的div，带有一个复选框列表。默认选中的第一个选项卡在我单击复选框时起作用，当选中或取消选中时它会发出警报，但是当我单击其他选项卡Sale-Items和asscoiated时当我选中或取消选中它不提醒或填充数组的项目时，会出现该选项卡的复选框。有谁知道我怎么能解决这个问题。我已对我的代码进行了评论，请查看。

JavaScript的：

var data = [];    
var tab = '<%= (Request.QueryString["tab"] == null ? "All-Items" : Request.QueryString["tab"]) %>'    

// this function changes the the selected tab but when I click the checkbox 
// associated with the tab it doesn't alert or fill the data array
$('ul.tabs .tab a').click(function (e) {            
    if (!$(this).hasClass('selected')) {
       tab = $(this).attr('href').split('#')[1]; // change the tab here for the checkbox change event
       alert(tab);
       if ($('#' + tab).find(':checkbox').length > 1) {
           $(this).parent().addClass('selected').siblings('li').removeClass('selected');
           $('#filter-tab-categories').show();
           $('#' + tab).show();
           $('.filters-panel').find('.filter-wrapper').not('#' + tab).hide();
           data = [];
           $('#' + tab + ' input:checkbox:checked').each(function () {
               data.push({ 'Name': $(this).val(), 
                        'Count': $(this).parent().siblings('td').find('a span').text()
               });
           });
           // getProducts(data, department, "0", "2", category);
       } else {
           $('#filter-tab-categories').hide();
       }
   }
   $('.console').html(data.join(',').toString());
   e.preventDefault();
});    

// prblem here when I click the tab and then click a checkbox doesn't alert
// but it does for the first tab(default) selected which is All-Items
// so All-Items div always alerts for the associated checkbox not for the selected tab or next tab
$('#' + tab + ' input:checkbox').change(function () {
    alert(tab);
    if ($(this).is(':checked')) {
        data.push({ 'Name': $(this).val(),
            'Count': $(this).parent().siblings('td').find('a span').text()
        });
    } else {
        for (var i = 0; i < data.length; i++) {
            if (data[i].Name == $(this).val()) {
                data.splice(i, 1);
            }
        }
    }
    $('.console').html(data.join(',').toString());

});

HTML：

<ul class="tabs">
    <li class="tab"><a href="#Sale-Items">Sale Items</a></li>        
    <li class="tab"><a href="#All-Items">All Items</a></li>
</ul>

<div class="filters-panel">
    <span id="LeftNav_lblFilterCategory" class="filters-category">Filters:
    <span style="color:#0066cc; font-weight:normal">Desktop Computers</span></span>
    <div id="Sale-Items" class="filter-wrapper" style="display:none">
        <div class="filter-group">
            Brand</div>
        <div class="filter-box">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="filter">
                        <input name="filter1" type="checkbox" value="Acer" /></td>
                    <td>
                        <a class="filter-name" href="#">Acer(<span>1</span>)</a></td>
                </tr>
                <tr>
                    <td class="filter">
                        <input name="filter2" type="checkbox" value="Compaq" /></td>
                    <td>
                        <a class="filter-name" href="#">Compaq(<span>1</span>)</a></td>
                </tr>
            </table>
        </div>
    </div>
    <div id="All-Items" class="filter-wrapper" style="display:block">
        <div class="filter-group">
            Brand</div>
        <div class="filter-box">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="filter">
                        <input name="filter8" type="checkbox" value="Acer" /></td>
                    <td>
                        <a class="filter-name" href="#">Acer(<span>4</span>)</a></td>
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

这一行：

$('#' + tab + ' input:checkbox').change(function () { ... });

仅在默认选项卡下注册change的{{1}}事件（input变量更改不会自动注册切换“选项卡的事件处理程序。”）

我建议只使用公共类名来注册事件处理程序：

tab

更新了代码： http://jsfiddle.net/ZmWpR/

更改选项卡时，更改事件不会触发复选框

1 个答案: