Javascript click event - найти все вхождения

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».Я хотел бы щелкнуть по первой строке, чтобы переключиться между «Бла 1» и «Бла 2».

Надеюсь, это имеет смысл, любая помощь будет принята с благодарностью.Rgds

РЕДАКТИРОВАТЬ: в качестве примечания мне необходимо иметь возможность щелкнуть Blahs позже, так как они перенесут меня на отдельную веб-страницу.Я еще не разобрался, как это сделать.Но не обязательно для этого конкретного вопроса.

EDIT2: после поиска больше, я нашел nextAll(), может быть, это может помочь?Но я не знаю, как его использовать.Я попробовал следующее, но это не сработало:

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

EDIT3: Я решил это случайно.Я ввел class = "stop" в <tr> для каждой строки.И использовал следующий код:

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

Теперь он находит каждую букву "p" до следующего создания строки.Таким образом, каждый клик отображает все связанные строки.

Answer 1

Один из возможных способов добиться этого - присвоить имя класса тегу

и переключать их, как показано ниже:

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

Надеюсь, что ответит на ваш вопрос.