JavaScript - 點擊未定義的元素數來切換多個元素

我有一個表，需要有一個未定義數量的行，當點擊時應該顯示一定數量的元素（在這種情況下div，因爲我讀到它是在tr上使用切換的最佳方式）。我所能做的最好的事情就是讓它成爲已經設定數量的元素...JavaScript - 點擊未定義的元素數來切換多個元素

jsfiddle.net - ~~這與設置的元素數量有關。~~工作代碼..

~~這就是我到目前爲止試圖弄清楚。~~
工作的js代碼：

$('.warning').on('click', function(e) { 
    var $ele = $(this).nextUntil('.warning').find('td > div'); 
    $ele.slideToggle(); 
    }); 
});

在這種情況下，我需要的每個點擊錶行顯示三個相應的div。
很明顯，回答jQuery，但我會很感激在香草js中的解決方案。

編輯：我很抱歉，我忽視提及我想添加一個滑動動畫。和slideToggle似乎並沒有工作...

EDIT2：由特里標記爲最佳答案。
將小提琴更改爲工作代碼。

來源

2017-05-21 mpasd

你的意思是你想在每個'.warning'之後切換一個未知數量的'.active'元素？只需使用'.nextUntil（）'應該可以工作。 – Terry

事實上，我們可以極大地簡化您的標記爲您的錶行：

<tr class="hidden"> 
    <td> 
    <div>Hidden.</div> 
    </td> 
    <td> 
    <div>Hidden.</div> 
    </td> 
    <td> 
    <div>Hidden.</div> 
    </td> 
</tr>

...並使用以下邏輯：

.nextUntil('.warning')每個.warning元素之後選擇尾隨<tr>。請參閱.nextUntil()的文檔。
使用.slideToggle()顯示/隱藏元素，而無需使用過於冗長CSS檢測

這裏是上面的邏輯，寫在jQuery的：

$('.warning').on('click', function() { 
    // Selects all siblings until the next `.warning` <tr> 
    var $ele = $(this).nextUntil('.warning').find('td > div'); 
    $ele.slideToggle(); 
});

如果你只想下游靶<tr>擁有類hidden（在可能存在其他不相關<tr>的情況下很有用，您不想切換），您可能需要添加一個可選過濾器：

$('.warning').on('click', function() { 
    // Selects all siblings until: 
    // 1. the next `.warning` <tr>, and 
    // 2. has the class "hidden" 
    var $ele = $(this).nextUntil('.warning').filter(function() { 
    return $(this).hasClass('hidden'); 
    }).find('td > div'); 
    $ele.slideToggle(); 
});

當然，這意味着在隱藏元素時會出現奇怪的堆疊邊框，因爲您在技術上隱藏表格行內容，但不會摺疊表格行/單元格本身。

下面是證明了概念一個例子：

$(function() { 
 
    $('.warning').on('click', function() { 
 
    var $ele = $(this).nextUntil('.warning').filter(function() { 
 
     return $(this).hasClass('hidden'); 
 
    }).find('td > div'); 
 
    $ele.slideToggle(); 
 
    }); 
 
});

table { 
 
    width: 75%; 
 
    border-collapse: collapse; 
 
} 
 

 
tr, 
 
td { 
 
    border: 2px solid #AEAEAE; 
 
    padding: 0; 
 
} 
 

 
td { 
 
    width: 50px; 
 
} 
 

 
.hidden td div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <tbody> 
 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 

 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 

 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="hidden"> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div>Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-05-21 22:26:17 Terry

嗯，這是令人尷尬的......我忽略了提及我想應用滑動效果...這是什麼不適合我，切換工作就好。你的代碼可以幫助我很多，謝謝。如果你只能添加一個滑動動畫，比如slideToggle ... – mpasd

我會把它扔在火上：https://jsfiddle.net/sheriffderek/vzgh1as2/ – sheriffderek

$(".warning").on("click", function() {使用jQuery .on將事件添加到動態元件（未來生成元件）。

然後找到下一個隱藏和切換將做的伎倆。

檢查的例子：

$(".warning").on("click", function() { 
 
    var nextHidden = $(this).next('.hidden'); 
 
    nextHidden.find('div').slideToggle(); 
 
});

table { 
 
    width: 75%; 
 
    border-collapse: collapse; 
 
} 
 

 
tr, 
 
td { 
 
    border: 2px solid #AEAEAE; 
 
    padding: 0; 
 
} 
 

 
td { 
 
    width: 50px; 
 
} 
 

 
.hidden div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <tbody> 
 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="active hidden"> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
    </tr> 
 

 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="active hidden"> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
    </tr> 
 

 
    <tr class="warning"> 
 
     <td>Click to show</td> 
 
     <td>Name</td> 
 
     <td>Age</td> 
 
    </tr> 
 
    <tr class="active hidden"> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
     <td> 
 
     <div class="">Hidden.</div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-05-21 22:33:30

請參見下面的代碼片段，請注意，我將所有的隱藏的階級，階層=「隱藏」，這是usless來命名他們每個人differntly：

$(".warning").on("click",function(){ 
 
    $(this).nextUntil(".warning").find(".hidden").slideToggle(); 
 
})

table { 
 
    width: 75%; 
 
    border-collapse: collapse; 
 
} 
 
tr, td { 
 
    border: 2px solid #AEAEAE; 
 
    padding: 0; 
 
} 
 

 
td { 
 
    width: 50px; 
 
} 
 

 
.hidden, .hidden1, .hidden2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
     <tbody> 
 
     <tr class="warning"> 
 
      <td>Click to show</td> <td>Name</td> <td>Age</td> 
 
     </tr> 
 
     <tr class="active"> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
     </tr> 
 
     <tr class="active"> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
     </tr> 
 
     <tr class="warning"> 
 
      <td>Click to show</td> <td>Name</td> <td>Age</td> 
 
     </tr> 
 
     <tr class="active"> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
     </tr> 
 

 
     <tr class="warning"> 
 
      <td>Click to show</td> <td>Name</td> <td>Age</td> 
 
     </tr> 
 
     <tr class="active"> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
      <td> 
 
       <div class="hidden">Hidden.</div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

來源

2017-05-21 22:35:44

支持多個tr活動類..（如樹示例） –

JavaScript - 點擊未定義的元素數來切換多個元素

回答

相關問題