向Javascript / Jquery添加多個屬性

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

我更新了小提琴。

Answer 3

分離您的類，例如vis1變成vis one （兩個類），然后對data屬性的值進行條件檢查。 如果將其設置為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 個解決方案

解決方案1
1 2014-07-16 09:55:22

解決方案2
1 已采納 2014-07-16 09:57:10

編輯

解決方案3
0 2014-07-16 09:52:53

向Javascript / Jquery添加多個屬性

問題描述

3 個解決方案

解決方案1 1 2014-07-16 09:55:22

解決方案2 1 已采納 2014-07-16 09:57:10

編輯

解決方案3 0 2014-07-16 09:52:53

解決方案1
1 2014-07-16 09:55:22

解決方案2
1 已采納 2014-07-16 09:57:10

解決方案3
0 2014-07-16 09:52:53