1

私のサイトにはチケットシステムがあります。元のチケットを表示するいくつかのdivがあり、次にこれらのdivの間にネストされたサブ非表示のdivがあり、顧客とスタッフの相互作用を示します。1つのdivを開き、他のdivを閉じてから、他のdivを開くと、これと他のすべてのdivが閉じて、クリックして開いたdivが表示されます。

jQuery(document).ready(function () {
    // ****** Click the ticket DIV
    $(".ticket_thread_7").click(function () {

        // Slide the SUB DIVs associated with this ticket
        $(".ticket_threads_7").slideDown("slow");

        // Turn the arrow from DOWN.png to UP.png
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

    // ****** If they have click the arrow again    
    }, function () {

        // .. close this ticket
        $(".ticket_threads_7").slideDown("slow");

        // .. also return the image back to normal
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

        return false;
    });
});

HTML

<div class="ticket_thread_7">
    <p>I want to return my order <img src="http://cdn.com/assets/imgs/up.png" class="ticket_arrow_7"></p>
    <div class="ticket_threads_7" style="display:none">

        <div class="staff_7_1"><p>We cannot accept a return on this item.</p></div>
        <div class="cus_7_2"><p>Why not.</p></div>
        <div class="staff_7_3"><p>Please visit cdn.com/returnterms to see our policy, apologies.</p></div>

    </div>
</div>

この現在のソリューションは正常に機能します。あなたが想像できるように。これは動的なPHP駆動型サイトであるため、サイトには多くのチケットがあります。jQueryで知りたいのですが、コマンドを使用して、ページ上の他のすべてのDIV要素IDを取得し、それらを非表示にできますか。

だから私はこのようなことをすることができます：

// Hide all other current open threads and reset their arrows
$(".ticket_threads_7*!=7").slideDown("slow");
$('.ticket_arrow_'*!=7).attr("src", "http://cdn.com/assets/imgs/up.png");

したがって、矢印をクリックすると、他のすべてのスレッドが開いている場合は閉じ、矢印がリセットされてこのスレッドが開きます。

4

3 に答える 3

5

クラスはユニークなものを指すようには設計されていません。次のようなことを行う必要があります。

<div class="ticket_thread" id="ticket_thread_7">
   <p>...<img class="arrow" /></p>
   <div class="details">
      ...
   </div>
</div>

そうすれば、やりたいことが簡単にできます。

$(".ticket_thread").not(this).find('.details').slideDown("slow");
$(".ticket_thread").not(this).find('.arrow').attr("src", "http://cdn.com/assets/imgs/up.png");

また、クラスとCSSスプライトを使用して矢印を設計することを検討してください。

于 2012-07-10T14:59:40.613 に答える
1 
$("[class^=ticket_threads]").click(function () {
   //your code
   $("[class^ticket_threads]").not(this).hide();
   $("[class^ticket_arrow]").not($(this).siblings("[class^=ticket_arrow"))
      .attr('src' ...)
});

このようなものを使用して、ハンドラー内の現在の要素を除くすべてを選択できます。

また、なぜ2つの引数があるのか​​わかりませんclick。それが何かをするかどうかはわかりません。さらに、それらは同一のようです。

于 2012-07-10T14:59:07.337 に答える
0

親要素と子要素を組み合わせて使用​​する必要があります。以下は私が持っている解決策です。デモを見てコードをダウンロードし、ニーズに合わせて変更してください。

ここでデモを見ることができます。JsFiddleソース：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Test</title>
            <style type="text/css">
                h1{text-decoration:underline;padding:5px;cursor:pointer}
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
                /*bind all clicks on an 'h1' element to trigger this function*/
                $('h1').click(function() {
                    /*if the element following this one has the class 'parent' and the class 'showMe'*/
                    if($(this).next('.parent').hasClass('showMe')) {
                        /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/
                        $('.parent, .child').removeClass('showMe').hide();
                    }
                    /*if the element following this one has the class 'parent' and does not have the class 'showMe'*/
                    else {
                        /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/
                        $('.parent, .child').removeClass('showMe').hide();
                        /*add the class 'showMe' to the element following this one with the class 'parent'*/
                        $(this).next('.parent').addClass('showMe').show();
                    }
                });
                /*bind all clicks on an 'h2' element to trigger this function*/
                $('h2').click(function() {
                    /*if the element following this one has the class 'child' and the class 'showMe'*/
                    if($(this).next('.child').hasClass('showMe')) {
                        /*remove the class 'showMe' from all elements with the class 'child'*/
                        $('.child').removeClass('showMe').hide();
                    }
                    else {
                        /*remove the class 'showMe' from all elements with the class 'child'*/
                        $('.child').removeClass('showMe').hide();
                        /*add the class 'showMe' to the element following this one with the class 'child'*/
                        $(this).next('.child').addClass('showMe').show();
                    }
                });
                /*hide all elements with the class 'parent' or 'child'*/
                $('.parent, .child').hide();
                /*simulate a click on the first 'h1' element and the first 'h2' element within that 'h1' element*/
                $('h1:first, h1:first h2:first').click();
            });
            </script>
        </head>
        <body>
            <h1>Yacht 1</h1>
            <div class="parent">
                <h2>Description 1.1</h2>
                <div class="child">
                    <p>Content 1.1</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Images</h2>
                <div class="child">
                    <p>Content 1.2 Images here</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Extras</h2>
                <div class="child">
                    <p>Content 1.3</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <h1>Yacht 2</h1>
            <div class="parent">
                <h2>Description 2.1</h2>
                <div class="child">
                    <p>Content 2.1</p>
                    <p>Sed quia consequuntur magni dolores eos et aut officiis debitis aut rerum necessitatibus tempora incidunt ut labore et dolore. Omnis dolor repellendus. Itaque earum rerum hic tenetur a sapiente delectus, iste natus error sit voluptatem ut enim ad minima veniam.</p>
                    <p>Magnam aliquam quaerat voluptatem. Qui ratione voluptatem sequi nesciunt. Nisi ut aliquid ex ea commodi consequatur? Sed quia non numquam eius modi id est laborum et dolorum fuga.</p>
                </div>
                <h2>Images 2.2</h2>
                <div class="child">
                    <p>Images here  2.2</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Extras 2.3</h2>
                <div class="child">
                    <p>Content 2.3</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </body>
    </html>​
于 2012-07-12T09:10:38.680 に答える