jquery动画只有一个单元格

我目前正在学习jQuery，并想知道如何只能影响表格中的一个单元格？这是我的小提琴https://jsfiddle.net/amosangyongjian/mmqasf5t/4/jquery动画只有一个单元格

这是jQuery代码

$(document).ready(function(){ 
    $("td").hover(function(){ 
    $(this).siblings(".expand").slideDown("slow"); 
    },function(){ 
    $(this).siblings(".expand").slideUp("slow"); 
    }); 
});

我已经尝试过其他几种方法，但似乎没有工作。

请帮忙。谢谢

来源

2016-08-23 JianYA

尝试改变'.siblings'到'.find' –

哦，它的作品！谢谢！ – JianYA

试试这个：

$(document).ready(function(){ 
 
\t $("td").hover(function(){ 
 
    \t \t $(this).find(".expand").slideDown("slow"); 
 
    \t },function(){ 
 
    \t \t $(this).find(".expand").slideUp("slow"); 
 
    \t }); 
 
});

td { 
 
    padding:10px; 
 
} 
 

 
.expand { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" id="tableclass"> 
 
<tr> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello1</p> 
 
    </td> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello2</p> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello3</p> 
 
    </td> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello4</p> 
 
    </td> 
 
</tr> 
 
</table>

来源

2016-08-23 06:34:43

有没有办法删除操作队列？如果我非常快速地悬停10次，并且将光标移动到其他地方，它们会一遍又一遍地重复，直到队列结束。 –

是的，你可以像这样保存状态：https://jsfiddle.net/a1npjqLx/我添加了一个数据标签用于设置一些自定义状态，该状态在幻灯片播放完毕后开始设置。 –

td没有任何兄弟姐妹.expand。但是，p呢。

因此，您有两种选择，可以将事件侦听器设置为td p，这也会影响可以悬停的区域。所以，你真正想要的是可能改变：

$(this).siblings(".expand")

到

$(this).children(".expand")

$("td").hover(function(){ 
 
    $(this).children(".expand").slideDown("slow"); 
 
}, function(){ 
 
    $(this).children(".expand").slideUp("slow"); 
 
});

td { 
 
    padding:10px; 
 
} 
 

 
.expand { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" id="tableclass"> 
 
<tr> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello1</p> 
 
    </td> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello2</p> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello3</p> 
 
    </td> 
 
    <td> 
 
    <p class="expand">Hello1Expanded</p> 
 
    <p>Hello4</p> 
 
    </td> 
 
</tr> 
 
</table>

来源

2016-08-23 06:35:47 smoksnes

谢谢，我更喜欢使用.find，因为它的面积要大得多。谢谢！ – JianYA

是的，我想。在这种情况下'find'和'children'会返回相同的结果，但是我个人更喜欢'chilren'，因为它会更快。 – smoksnes

this is correct way when you choose via $("td") 

     $(document).ready(function(){ 
      $("td").hover(function(){ 
      $(this).find(".expand").slideDown('slow'); 
      },function(){ 
      $(this).find(".expand").slideUp("slow"); 
      }); 
     }); 

or 

$(document).ready(function(){ 
      $("td").hover(function(){ 
      $(this).children(".expand").slideDown('slow'); 
      },function(){ 
      $(this).children(".expand").slideUp("slow"); 
      }); 
     }); 

    your code also work when you change your code $("td p") 

    $("td p") -siblings will .expand 
    $("td") -siblings will another td datas 

    because siblings will it get previous element.

来源

2016-08-23 06:42:59 Sophie

jquery动画只有一个单元格

回答

相关问题