Javascript點擊事件 - 查找所有事件

Question

我有一個javascript發生在桌面上的點擊事件。 代碼按原樣運行，只滑動它找到的第一個“p”。 我希望代碼能夠將所有出現的“p”滑動到下一個“名稱”和“信息”。

使用Javascript：

$(document).ready(function()
{
    $("td[colspan=1]").find("p").hide();
    $("table").click(function(event)
    {
        event.stopPropagation();
        var $target = $(event.target);
        alert(event.target);
        // var current_event = $(event.currenttarget);
        if ( $target.closest("td").attr("colspan") > 1 )
        {
            $target.slideUp();
        }
        else
        {
            // alert(event.currentTarget);
            // var currentEventTarget = event.currentTarget; // this outputs: Object object
            // document.write(event.currentTarget.nodeName); // this outputs: TABLE 
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

表格看起來像這樣（我從其他地方借來的）：

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p>Blah 1</p></td></tr>
    <tr><td colspan="1"><p>Blah 2</p></td></tr>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p>Blah 3</p></td></tr>
</table>

因此，當點擊第一行時，目前它只切換'Blah1'並點擊第二行切換'Blah 3'。 我想點擊第一行來切換'Blah 1'和'Blah 2'。

我希望這是有道理的，任何幫助都將非常感激。 RGDS

編輯：作為旁注，我需要稍后點擊Blahs，因為他們會帶我到一個單獨的網頁。 我還沒有弄清楚如何做到這一點。 但這個特定問題不是必需的。

編輯2：搜索更多后，我找到了nextAll() ，也許這可以幫忙嗎？ 但我不知道如何使用它。 我嘗試了以下，但它不起作用：

$target.closest("tr").nextAll("p").slideToggle();

EDIT3：我偶然解決了它。 我在<tr>為每一行引入了一個class =“stop”。 並使用以下代碼：

$target.closest("tr").nextUntil("tr.stop").find("p").slideToggle();

現在找到每個“p”直到下一行創建。 所以每次點擊都會顯示所有關聯的行

Answer 1

實現此目的的一種可能方法是為<p>標記指定一個類名，並切換它們，如下所示：

 $(document).ready(function() { $("td[colspan=1]").find("p").hide(); $("table").click(function(event) { event.stopPropagation(); var $target = $(event.target); // alert(event.target); // var current_event = $(event.currenttarget); if ( $target.closest("td").attr("colspan") > 1 ) { $target.slideUp(); } else if($target.closest("td").attr("colspan") == 1) { // alert(event.currentTarget); // var currentEventTarget = event.currentTarget; // this outputs: Object object // document.write(event.currentTarget.nodeName); // this outputs: TABLE //$target.closest("tr").next().find("p").slideToggle(); $( ".toggle1" ).slideToggle( "slow" ); } }); $( ".toggle2" ).click(function() { $( ".toggle2This" ).toggle( "slow", function() { // Animation complete. }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr> <tr><td colspan="1"><p class="toggle1">Blah 1</p></td></tr> <tr><td colspan="1"><p class="toggle1">Blah 2</p></td></tr> <tr><td class="toggle2"><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr> <tr><td colspan="1"><p class="toggle2This">Blah 3</p></td></tr> </table> 

希望這能回答你的問題。