Question

我希望标题清晰，试图寻找类似但却无法找到的东西。

好吧，这是我到目前为止的代码：

    $(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 history-item和order-titels会在再次单击时淡入并淡出，并向要单击的div添加一个类。这是应该的工作，但有更多的div与名称折叠重新订购，以及更多的历史项目。每个折叠重新排序的div都有自己的ID（1,2,3等）

所以我的问题是，如何淡入/淡出属于折叠重新排序的历史项目？

我不确定我是否清楚地解释它，如果不是，请告诉我，我会尝试更具体。提前谢谢！

编辑：这是小提琴，如果这实际上有助于任何哈哈。 http://jsfiddle.net/7x5taLn9/6/

Answer 1

你在寻找这样的东西：

$(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/。

Jquery fadein / out table row取决于ID

1 个答案: