Question

我有一个在表上的click事件上发生的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，因为它们会将我带到单独的网页。我还没弄清楚该怎么做。但是对于这个特定问题不是必需的。

EDIT2：搜索更多之后，我发现了nextAll()，也许可以帮上忙吗？但是我不知道如何使用它。我尝试了以下操作，但没有成功：

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

EDIT3：我无意中解决了它。我在<tr>中为每一行引入了一个class =“ stop”。并使用以下代码：

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

希望能回答您的问题。

JavaScript单击事件-查找所有出现的事件

1 个答案: