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動畫只有一個單元格

回答

相關問題