Question

我目前正在处理一组表格，并且只需点击一下按钮就可以让它们扩展和收缩。然而，我遇到了一个问题，即创建一个同时扩展所有表格的按钮。请看我的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>   <!--this first part is easy to implement-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $('.vis'+$(this).attr('vistoggle')).toggle();
    });
});
</script>
</head>
<body>
<a href="#" class="toggler" vistoggle="1">Expand all</a> <!--vistoggle needs to have values 1 and 2 in it-->
<table>
    <tr>
        <td>safeaef</td>
        <td>asdfaef</td>
        <td>asfead</td>
        <td><a href="#" class="toggler" vistoggle="1">Expand</a></td>
    </tr>
    <tr class="vis1" style="display:none">
        <td>asdfae</td>
        <td>zxcvry</td>
        <td>rteyertr</td>
        <td></td>
    </tr>
    <tr class='vis1' style='display:none'>
        <td>tsersg</td>
        <td>sdgfs</td>
        <td>wregssdf</td>
        <td></td>
    </tr>
    <tr class="vis1" style="display:none">
        <td>sdfgrs</td>
        <td>sgdfgsr</td>
        <td>Cewret</td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td>cfasdfas</td>
        <td>1adfaed</td>
        <td>asdfasdfea</td>
        <td><a href="#" class="toggler" vistoggle="2">Expand</a></td>
    </tr>
    <tr class="vis2" style="display:none">
        <td>asdfaefas</td>
        <td>1asdf</td>
        <td>Cisdfae</td>
        <td>22fasdew</td>
    </tr>
    <tr class="vis2" style="display:none">
        <td>asdfaef</td>
        <td>1sefa0</td>
        <td>Ciasdf 2</td>
        <td></td>
    </tr>
</table>
</body>
</html>

Answer 1

您可以检查需要切换的attr，如果匹配所有打开的1和2，如果您的表不是动态的，则此方法可行

<a href="#" class="toggler" vistoggle="all">Expand all</a>

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        if($(this).attr('vistoggle') == "all"){
             $('.vis1').toggle();  
             $('.vis2').toggle();     
        }else{
            $('.vis'+$(this).attr('vistoggle')).toggle();
        }
    });
});

小提琴：http://jsfiddle.net/6hpbq/

Answer 2

您可以尝试构建一个这样的选择器： $（ 'TR [类^ = “可见”]'）它会选择所有元素，哪个类属性以'vis'开头。

但是从我看到你希望第一行始终保持可见，所以我建议简单地将表头和它的主体分开：

<table>
    <thead><tr>...</tr></thead>
    <tbody id="table-one" class="vis">
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>
<table>
    <thead><tr>...</tr></thead>
    <tbody id="table-two" class="vis">
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

然后你可以使用一个简单的：

$('tbody.vis').toggle();

切换所有表格，只需切换其中一个表格即可：

$('tbody#tbody-one').toggle();

这可能是出于性能原因的更好的想法（发现ID比类快得多）。 TBODY的ID属性可以像你现在存储一样存储（在按钮的属性中）。

小提琴示例： http://jsfiddle.net/SL4UZ/3/

修改

要使您的HTML有效，您应该使用数据属性或使用javascript绑定您的事件，而不是简单地在button标记内添加海关属性。例如：

<button data-toggle-id="tbody-one">Toggle</button>

我更新了我的小提琴。

Answer 3

将您的类分开，例如vis1变为vis one（两个类）然后对数据属性的值进行条件检查。如果设置为all，则使用类vis切换所有元素，否则切换特定的元素：

<script>
$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        var vistog = $(this).attr('vistoggle');
        if(vistog == 'all'){
             $('.vis').toggle();
        }else{
            $('.vis.' + vistog).toggle();
        }

    });
});
</script>
</head>
<body>
<a href="#" class="toggler" vistoggle="all">Expand all</a> <!--vistoggle set to all -->
<table>
    <tr>
        <td>safeaef</td>
        <td>asdfaef</td>
        <td>asfead</td>
        <td><a href="#" class="toggler" vistoggle="one">Expand</a></td>
    </tr>
    <tr class="vis one" style="display:none">
        <td>asdfae</td>
        <td>zxcvry</td>
        <td>rteyertr</td>
        <td></td>
    </tr>
    <tr class='vis one' style='display:none'>
        <td>tsersg</td>
        <td>sdgfs</td>
        <td>wregssdf</td>
        <td></td>
    </tr>
    <tr class="vis one" style="display:none">
        <td>sdfgrs</td>
        <td>sgdfgsr</td>
        <td>Cewret</td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td>cfasdfas</td>
        <td>1adfaed</td>
        <td>asdfasdfea</td>
        <td><a href="#" class="toggler" vistoggle="two">Expand</a></td>
    </tr>
    <tr class="vis two" style="display:none">
        <td>asdfaefas</td>
        <td>1asdf</td>
        <td>Cisdfae</td>
        <td>22fasdew</td>
    </tr>
    <tr class="vis two" style="display:none">
        <td>asdfaef</td>
        <td>1sefa0</td>
        <td>Ciasdf 2</td>
        <td></td>
    </tr>
</table>
</body>
</html>

向Javascript / Jquery添加多个属性

3 个答案:

修改