jquery - jQuery 如何使用 .not 与此

Question

我有票务系统。消息被放置在一个 div 中，并且该 div 隐藏了子消息（该票的回复）

演示

jsFiddle 托管演示

单击箭头 - 显示线程子项。再次单击它会隐藏线程子项，并且箭头会上下移动。

我想要它，如果当前线程是打开的，用户点击另一个箭头，打开的箭头应该恢复回来，反之亦然。

jQuery

    $(document).ready(function(){
        $('h1').click(function(){
            if ($(this).next('.parent').hasClass('showMe')){
                    $('.parent').removeClass('showMe').hide();
                    $(this).find("#ticket_arrow").removeClass('up');
                $(this).find("#ticket_arrow").addClass('down');
              } else {
                $('.parent').removeClass('showMe').hide();
                    $(this).find("#ticket_arrow").removeClass('down');
                $(this).find("#ticket_arrow").addClass('up');
                $(this).next('.parent').addClass('showMe').show();
            }
        });
    });
/**
  Hides all sub threads on Load
**/
$('.parent').hide();

HTML

<style type="text/css">
.ticket_thread_h1 span{cursor:pointer}
.down{background:url(http://www.gc-cdn.com/personalstylist/down.png) no-repeat;width:15px;height:10px;display:block}
.up{background:url(http://www.gc-cdn.com/personalstylist/up.png) no-repeat;width:15px;height:10px;display:block}
</style>
<h1 id="ticket_thread_1" class="ticket_thread_h1">Thread # 1 <span id="ticket_arrow" class="down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #1 1</p></div>
    <div class="sub_thread"><p>Thread Messages #1 2</p></div>
</div>
<h1 id="ticket_thread_2" class="ticket_thread_h1">Thread # 2 <span id="ticket_arrow" class="down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #2 1</p></div>
    <div class="sub_thread"><p>Thread Messages #2 2</p></div>
</div>

Answer 1

添加以下代码：

$("h1").find('.up').each(function(){$(this).removeClass('up').addClass('down');});

部分之后$(this).find("#ticket_arrow").removeClass('down');，else所以代码必须是：

$('h1').click(function(){
            if ($(this).next('.parent').hasClass('showMe')){
                $('.parent').removeClass('showMe').hide();
                $(this).find("#ticket_arrow").removeClass('up');
                $(this).find("#ticket_arrow").addClass('down');
              } else {
                $('.parent').removeClass('showMe').hide();
                $(this).find("#ticket_arrow").removeClass('down');
                $("h1").find('.up').each(function(){$(this).removeClass('up').addClass('down');});
                $(this).find("#ticket_arrow").addClass('up');
                $(this).next('.parent').addClass('showMe').show();
            }
        });

这对我有用。

编辑：顺便说一句，为什么你有多个具有相同 ID 的元素？

Answer 2

只需存储对最后显示项目的引用。

它不会遍历所有可能的消息，因为这样做效率低且相对昂贵。请注意，我没有在 jQuery 中验证这一点，请做我的客人。

var lastOpenItem = undefined;

$('h1').click(function(){

    if( lastOpenItem ) {
        lastOpenItem.removeClass('showMe');

        var curSelect = $(this).next('.parent');
        lastOpenItem = ( curSelect == lastOpenItem ) ? undefined : curSelect;
    }
});

最重要的是，您的代码对我来说似乎是多余的，因为它在 IF 和 ELSE 中有两次相同的行。我建议将其移出条件。

$('.parent').removeClass('showMe').hide();

老实说，我会为您的类名提供语义名称（向上、向下、showMe 与 activeMessage、arrowExpand 等），但是很好。

我还会重新组合您的 HTML，因为您的动态 ID 与数字不是......那么好。

最后，您不必切换 2 个类。给箭头类“箭头”或其他东西，CSS可以通过它的父状态切换，因为它们是相互绑定的。

HTML：

<h1 id="ticket_thread_2" class="ticket_thread_h1 activeMessage">Thread # 2 <span class="ticket_arrow">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #2 1</p></div>
    <div class="sub_thread"><p>Thread Messages #2 2</p></div>
</div>

CSS：

.ticket-arrow{

    background:url(http://www.gc-cdn.com/personalstylist/down.png) no-repeat;
    width: 15px;
    height:10px;
    display:block

}
.activeMessage>.arrow {

    background-image:url(http://www.gc-cdn.com/personalstylist/up.png);
}​

我确实发现对图像使用绝对 url 并不常见，我认为您应该将它们复制到本地，除非您希望它们在 gc-cdn.com 确实更改它们时也更改..

Answer 3

这是另一个工作版本 - 更干净一点。

HTML 标记 - 添加.arrow类和固定 ID：

<h1 id="ticket_thread_1" class="ticket_thread_h1">Thread # 1 <span id="ticket_arrow1" class="arrow down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #1 1</p></div>
    <div class="sub_thread"><p>Thread Messages #1 2</p></div>
</div>
<h1 id="ticket_thread_2" class="ticket_thread_h1">Thread # 2 <span id="ticket_arrow2" class="arrow down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #2 1</p></div>
    <div class="sub_thread"><p>Thread Messages #2 2</p></div>
</div>

JavaScript - 缓存选择器：

$(document).ready(function(){
    $arrows = $('.arrow');
    $parents = $('.parent');
    $('h1').click(function(){
        if ($(this).next('.parent').hasClass('showMe')){
           $parents.removeClass('showMe').hide();
           // Just in case make all arrows point down:
           $arrows.removeClass('up').addClass('down');
        } else {
           $parents.removeClass('showMe').hide();
           $arrows.removeClass('up').addClass('down');
           $(this).find('.arrow').addClass('up');
           $(this).next('.parent').addClass('showMe').show();
        }
    });
    /**
    Hides all sub threads
    **/
   $parents.hide();
});

工作jsfiddle：http: //jsfiddle.net/jfrej/cs87W/8/

如果可以，您应该开始使用最新的 jQuery。jsfiddle 中的 1.3.2 版本已经过时 - 我将其保留以确保我的解决方案也适用于该版本。

Answer 4

$('h1').click(function(){
  var $t = $(this);

  $t.siblings('h1').children('span').removeClass('up')
  .end().next().hide();

  $t.children('span').toggleClass('up')
  .end().next().toggle();
});

我只是将箭头默认设置为向下（大多数项目都会这样）并切换“向上”。

jsfiddle