Question

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

这是jquery代码

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

我尝试了其他几种方法，但似乎都没有。

请帮忙。谢谢

Answer 1

试试这个：

$(document).ready(function(){
	$("td").hover(function(){
  		$(this).find(".expand").slideDown("slow");
  	},function(){
  		$(this).find(".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>

Answer 2

background-color没有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;
}

Answer 3

    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.

JQuery只为一个单元格设置动画

3 个答案: