Próbuję utworzyć przycisk, który przełącza pojemnik, który obecnie działa, gdzie użytkownik kliknie w dowolnym miejscu nagłówku, pojemnik przełączy, ale chcę, aby funkcja kliknięci była pracować na przycisku, który jest zagnieżdżony wewnątrz listy, która jest wewnątrz nagłówka.

Obecnie kod działa tylko przez wybranie nagłówka. Chcę, żeby pracował tylko wtedy, gdy użytkownik kliknie przycisk przełączania. Próbowałem $("button").click $(".projectHeader > button") Próbowałem również wybrać przy użyciu parent().children()

Czy ktoś może mi pomóc zrozumieć, w jaki sposób mogę wybrać przycisk przełączania w funkcji kliknięcia? Próbowałem kilku rzeczy i jestem bardzo utknął, poniżej jest jQuery, a tutaj jest link do JSFiddle. Każda pomoc jest bardzo doceniana.

http://jsfiddle.net/2o0wx8x4/

   <script type="text/javascript">

        $(document).ready(function()
        {  
            console.log('page has loaded');
          $(".projectHeader").click(function()
          {
            console.log('button was clicked');
            $(this).next('.tableContainer').slideToggle("slow");
             $(this).parent().siblings().children().next().slideUp();
             return false;
            console.log('the table container closed');
          });
        });
    </script>
            <div class="projectWrapper">
                <div class="projectHeader">
                    <ul>
                        <li> <button id="toggleButton">Toggle</button> </li>
                        <li> Project Name </li>
                        <li> Status </li>
                        <li> Budget </li>
                        <li> Client Req Start Date </li>
                        <li> Project Start Date </li>
                        <li> <a href="#">Show All</a> </li>
                        <li> can be staffed () </li>
                    </ul>   
                </div>
                <div class="tableContainer"> table goes in here</div>
             </div>
0
user7167 14 sierpień 2014, 23:03

3 odpowiedzi

Najlepsza odpowiedź

Spróbuj tego:

var j$ = jQuery.noConflict();
j$(document).ready(function () {
    console.log('page has loaded');
    j$(".projectHeader button").click(function () {
        console.log('button was clicked');
        j$(this).closest('.projectHeader').next('.tableContainer').slideToggle("slow");
        j$(this).closest('.projectWrapper').siblings().children().next().slideUp();
        return false;
        console.log('the table container closed');
    });
});

JSFiddle Przykład

Użyj $(".projectHeader button"), aby wybrać tylko przyciski. Następnie closest('.projectHeader') przemierzają dom do najbliższej {x2}} i .next('.tableContainer') wynika kolejne rodzeństwo div, aby przełączać. Następnie musisz wybrać .closest('.projectWrapper'), aby zamknąć wszystkie pojemniki rodzeniowe.

1
j08691 14 sierpień 2014, 20:04

Nie mogłem załadować skrzypce (sieci zabezpieczonej), ale oto jak możesz dodać kliknięcie kliknięcia na przycisku i uzyskać odniesienie do najbliższego .projectHeader.

$('.projectHeader button').click(function () {
    var header = $(this).closest('.projectHeader');
    //from here you should be good to go
});
1
plalx 14 sierpień 2014, 19:09

Jest to podobne do innych odpowiedzi, ale także kołpasy wszystkie inne wydatki.

http://jsfiddle.net/2o0wx8x4/3/

Zgodnie z formatowaniem:

j$(document).ready(function()
        {  
            console.log('page has loaded');
          j$(".projectHeader button.toggleButton").click(function()
          {
             //get the parent div
             var parent = j$(this).parent().parent().parent();
             console.log('button was clicked');
             parent.addClass("clicked");

             parent.next('.tableContainer').slideToggle("slow");
             j$(".projectHeader:not(.clicked)").next().slideUp();
             parent.removeClass("clicked");
             parent.parent().siblings().children().next().slideUp();
             return false;
          });
        });
0
Tyler Peryea 14 sierpień 2014, 19:14