jquery - jQueryこれで.notを使用する方法

Question

チケット制をとっています。メッセージは div に配置され、その div には非表示のサブメッセージ (そのチケットの返信) があります

矢印をクリックすると、スレッドの子が表示されます。もう一度クリックすると、スレッドの子が非表示になり、矢印が上下します。

現在のスレッドが開いている場合、ユーザーが他の矢印をクリックすると、開いている矢印が元に戻り、その逆も同様になるようにしたいのです。

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>

score 2 · Accepted Answer

次のコードを追加します。

$("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を持つ複数の要素があるのはなぜですか？

score 0 · Accepted Answer

最後に表示されたアイテムへの参照を保存するだけです。

考えられるすべてのメッセージをループするわけではありません。これは効率が悪く、比較的コストがかかるためです。jQuery でこれを確認しなかったことに注意してください。

var lastOpenItem = undefined;

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

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

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

その上、IF と ELSE の両方に同じ行が 2 回あるため、コードは冗長に見えます。状態から移動することをお勧めします。

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

正直なところ、クラス名にセマンティック名 (up、down、showMe 対 activeMessage、arrowExpand など) を付けますが、まあまあです。

数字を含む動的IDはあまり良くないので、HTMLも再グループ化します。

最後に、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 が変更したときに変更したくない場合を除き、ローカルにコピーする必要があると思います..

score 0 · Accepted Answer

$('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

score 0 · Accepted Answer

これは別の作業バージョンです - 少しきれいです。

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 は古くなっています。私のソリューションがそのバージョンでも動作することを確認するために残しました。

jquery - jQueryこれで.notを使用する方法

4 に答える 4

Related

Reference