jquery淡入淡出/表格行取決於ID

我希望標題清楚，試圖尋找類似的東西，但無法真正找到它。jquery淡入淡出/表格行取決於ID

好了，所以這是我的代碼至今：

$(document).ready(function(){ 

    $('.collapsed-reorder').click(function(){ 

     $('.history-item').fadeToggle("500"); 
     $('.order-titels').fadeToggle("500"); 
     $(this).toggleClass('active-bar'); 
     $('.icon-right').attr('src',"images/icon-down.png"); 

    }); 
});

編輯;忘了HTML代碼。

<tr class="collapsed-reorder" id="1"> 

      <td class="right-icon" colspan="2"><img class="icon-right" src="images/icon-right.png"> </td> 
      <td colspan="1">#20234</td> 
      <td colspan="1">29-07-15</td> 
      <td colspan="8">2</td> 
      <td class="repeat-order" colspan="2">Repeat order </td> 

    </tr> 

    <tr class="order-titels"> 

      <th colspan="8" class="item">ITEM</th> 
      <th class="price">PRICE</th> 
      <th class="qty">QTY</th> 
      <th class="type">TYPE</th> 
      <th class="sub-total">SUBTOTAL</th> 
      <th class="your-price">YOUR PRICE</th> 
      <th class="remove">REMOVE</th> 

    </tr> 
      <tr class="history-item"> 

       //In here is a lot more data in td's, but I don't think that's relevant here. 

      </tr>

這裏是做什麼的（明顯的那種，但耶）現在：每當我點擊DIV倒塌，重新排序，在div歷史項目和訂單titels淡入和點擊時淡出再次向被點擊的div添加一個類。這是應該的，但是會有更多的div與名稱摺疊重新排序，和更多的歷史項目。每個摺疊重新排序div有他自己的ID（1，2，3等）

所以我的問題是，我如何淡入/淡出屬於摺疊重新排序的歷史項目？

我不確定我是否清楚地解釋它，如果不是，請讓我知道，我會盡力做出更具體的說明。提前致謝！

編輯：這裏是小提琴，如果這實際上會幫助任何哈哈。 http://jsfiddle.net/7x5taLn9/6/

來源

2015-10-06 Stefan Neuenschwander

您尋找的是這樣的：

$(this).parent().find('.history-item').fadeToggle("500"); 
$(this).parent().find('.order-titels').fadeToggle("500"); 
$(this).toggleClass('active-bar'); 
$(this).parent().find('.icon-right').attr('src', "images/icon-down.png");

小提琴：http://jsfiddle.net/7x5taLn9/2/。

編輯：如果你想要做一個表，使用$的.next（）函數，就像這樣：

var $this = $(this); 
var $currentEl = $this; 
// Search for .history-items after this element and before the end of the parent element 
while ($currentEl.next().length > 0 && !$currentEl.next().hasClass('collapsed-reorder')) { 
    $currentEl = $currentEl.next(); 
    if ($currentEl.hasClass('history-item')) { 
     $currentEl.fadeToggle("500"); 
    } 
}

小提琴：http://jsfiddle.net/7x5taLn9/7/。

來源

2015-10-06 16:55:53

它確實解釋了它的想法，但它似乎並不正確。如果我使用該代碼，無論我點擊哪個摺疊重新排序DIV並不重要，它仍然會在所有歷史項目中淡出 –

而且我看到它在小提琴中起作用，但我猜這確實是因爲它們是單獨的表格，我確實需要它在1張表 –

@Stefan然後，你需要更新小提琴的實際使用場景。 –

jquery淡入淡出/表格行取決於ID

回答

相關問題