1

我的网站上有一个票务系统。有几个 div 显示原始工单，然后嵌套在这些 div 之间的子隐藏 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 sprite来设计箭头。

于 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' ...)
});

您可以使用类似这样的方法来选择处理程序中除当前元素之外的所有元素。

我也不确定你为什么对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 回答