向 Javascript/Jquery 添加多个属性答案

【问题标题】：Adding multiple attributes to Javascript/Jquery向 Javascript/Jquery 添加多个属性
【发布时间】：2014-07-16 09:45:30
【问题描述】：

我目前正在处理一组表格，只需单击一个按钮，我就可以让它们展开和收缩。但是，我在创建一个同时展开所有表格的按钮时遇到了问题。请看我的代码。

<!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>

【问题讨论】：

标签： javascript jquery html html-table show-hide

【解决方案1】：

您可以尝试构建这样的选择器： $('tr[class^="vis"]') 它将选择所有以“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>

我更新了我的小提琴。

【讨论】：

这正是我想要的，但是我发现了一个问题。全部切换时，关闭的打开，打开的关闭。这意味着如果用户打开了一个，那么它就会关闭。
这正是 jQuery.toggle() 所做的 :) 如果您希望它的行为有所不同，您需要使用 show() 和 hide()（或淡入/淡出等）函数而不是 toggle() , 并用if 语句包围它们以控制行为。
是的。这正是我所做的。

【解决方案2】：

您可以检查需要切换的 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/

【讨论】：

【解决方案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>

【讨论】：