[英]Jquery selectors - this vs id vs class
我有一个外部div，当我将其悬停在上面时，我希望第二个子元素在jquery中切换一个类。 我相信我的代码已经关闭，我认为我遇到的问题与我选择的内容有关，因为我不完全了解id，class或this之间的区别，所以没有得到正确的选择器。 感谢您的帮助！ （我不能只将它们全部分配给一个类，因为同一代码将有多个块）
<script>
function color_toggle(id){
selection = $(this) + ' img:nth-child(2)';
$( selection ).toggleClass("grey");
}
</script>
<div class="row-fluid supplier_new" onmouseover="color_toggle(this);" onmouseout="color_toggle(this);">
<div class="span3 supplier_logo">
<h4>APV Manufacturing</h4>
<img class="grey" src = "img/suppliers/55555/logo.png" />
</div>
<div class="span1" style="padding-left:15px;">
<img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-verified.png">
<br><br>
<img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-preferred.png">
</div>
</div>
既然你传递this给函数作为id参数，那么你要$(id)
但是，您可以这样称呼它：
onmouseover="color_toggle($(this))"
只需使用id.find("img:eq(2)").toggleClass("gray")
或者您可以这样做：
onmouseover="color_toggle.call(this);"
还有你的JS：
function color_toggle() {
$(this).find("img:eq(2)").toggleClass("gray");
}
或者您可以只使用CSS：
.someclass:hover img:nth-child(2) {
/* apply style here */
}
一些东西：
（1）在代码中的<img>元素中添加了ID属性（它们丢失了）
（2）删除了内联javascript，在脚本标签中使用了jQuery（始终最好这样做）
（3）固定jQuery选择器：
$(this).find('img:eq(2)').attr('id'); // <-- But the ID attr has to EXIST
在上面的jsFiddle演示中，当您将鼠标悬停在DIV上时，将看到第三张图像周围的背景开/关。
这是代码：
<script type="text/javascript">
$(document).ready(function() {
$('.row-fluid').hover(
function() {
hovIn($(this));
},
function() {
hovOut($(this));
}
);
function hovIn($this){
//$this.css({'background':'wheat'});
var myId = $this.find('img:eq(2)').attr('id');
color_toggle( myId );
}
function hovOut($this){
//$this.css({'background':'white'});
var myId = $this.find('img:eq(2)').attr('id');
color_toggle( myId );
}
function color_toggle(id) {
$('#'+id).toggleClass("grey");
}
}); //END document.ready
</script>
由于我们使用的是jQuery，因此请确保您引用jQuery库（通常在页面顶部的<head>标记中）：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
注意：
您应该打印/存储此jQuery选择器和事件列表 。 单击Next Chapter六次，您将循环浏览所有页面。
我刚刚更新了答案，请在这里检查更新
https://stackoverflow.com/a/19227334/1743214
所以我只解释这个，以及什么时候使用它。 这就像在指点什么..
doing_it_wrong() 。 this 我将在这里介绍基本情况（因此不是完整的答案）。 在元素上应用函数时使用this函数。
所以可以说我隐藏了一个元素。
$('#header').hide(5000 , function(){
$(this) //in this case im pointing at header . because it is the element i have selected .
})
它可以在上一个示例中使用，但请看一下这个示例
<ul>
<li class="someone" > me <li>
<li class="someone" > you <li>
<li class="someone" > he <li>
</ul>
$.each($('.someone'), function(){
$('.someone') // this will jsut select all the 3 elements again
$(this) // will get the current element that we are looping though
// if i do
console.log($(this).text()) // this will log me then you then he
})
深入了解this ，谷歌主题或阅读一些书：）。
jQuery选择器：$（'＃ID1，＃ID2，＃ID3'）vs $（'1X CLASS'）哪个更快？
[英]jQuery selectors: $('#ID1, #ID2, #ID3') vs $('1X CLASS') which is faster?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.