爲什麼最近的（）選擇器在這種情況下不起作用？

我正試圖在單擊單選按鈕時激活特定圖像上的toggleClass（）。我一直試圖讓它工作，但不能。我可以設法選擇單選按鈕的父元素，但沒有任何操作。我嘗試過next（），nextAll（）和nearest（）。所有這些似乎都沒有達到我想要達到的目的。爲什麼最近的（）選擇器在這種情況下不起作用？

這裏是我的jQuery函數：

$(document).ready(function() { 
    $("input[type=radio]").change(function() { 
    if (this.value == "AM") { 
     $(this).closest('img[title="am"]').toggleClass('houdini'); 
    } else if (this.value == "PM") { 
    alert('PM'); 
/*  Something here */ 
    } else { 
     return false(); 
    } 
    }); 
});

和我的HTML：

<tr> 
    <td><input type="radio" name="bisley" value="AM" />AM<input type="radio" name="bisley" value="PM" />PM<span class="compname">Bisley</span></td> 
    <td>Fit more into less space</td> 
    <td class="time"><img src="/images/generic/openday/tick.png" alt="tick" title="am" class="houdini" />10.00AM</td> 
    <td class="time"><img src="/images/generic/openday/tick.png" alt="tick" title="pm" class="houdini" />1.30PM</td> 
</tr>

來源

2011-06-05 Ben Gordon

因爲'input'和'img'正在被它們包含的'td'和你所轉換的函數分開按照您的預期工作。 – BoltClock 2011-06-05 16:11:17

closest搜索祖先元素; next和nextAll搜索同級元素。你想要的img元素是兄弟元素的孩子，所以你需要更復雜的語句。有此一展身手。

$(this).closest('tr').find('img[title="am"]').toggleClass('houdini');

這是說「尋找最近的祖先tr元素，然後找到內img[title="am"]

來源

2011-06-05 16:11:58 lonesomeday

好獨角獸，如果有點低分辨率:) – BoltClock 2011-06-05 16:14:15

@BoltClock當圖像下次刷新時他會變得更健康;-) – lonesomeday 2011-06-05 16:22:37

太好了。這樣可行。有關如何使用單選按鈕切換圖像類的想法？ – 2011-06-05 16:22:52

變化

$(this).parent().children('img[title="am"]').toggleClass('houdini');

SEE DEMO

來源

2011-06-05 16:20:06 diEcho

爲什麼最近的（）選擇器在這種情況下不起作用？

回答

相關問題