Jquery 选择器 - this vs id vs class
Posted
技术标签:
【中文标题】Jquery 选择器 - this vs id vs class【英文标题】：Jquery selectors - this vs id vs class 【发布时间】：2013-10-18 20:42:56 【问题描述】：我有一个外部 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>
【问题讨论】：
【参考方案1】：由于您将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 */
【讨论】：
这很好。我要补充一点，id 可能是参数的错误名称，因为传入的不是悬停元素的id，而是代表元素本身的对象。你可以叫它target，或div，或hovered_item。【参考方案2】：
一些事情：
(1) 为代码中的<img> 元素添加了 ID 属性（它们丢失了）
(2) 移除了内联 javascript，在脚本标签中使用了 jQuery（总是最好这样做）
(3) 修正 jQuery 选择器：
$(this).find('img:eq(2)').attr('id'); // <-- But the ID attr has to EXIST
jsFiddle Demo
在上面的 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>
注意：
您应该打印/记住this list of jQuery selectors and events。点击Next Chapter 六次，您将循环浏览所有页面。
【讨论】：
【参考方案3】：我在一秒钟前刚刚更新了一个答案，请在此处查看更新
https://***.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 .
)
为什么要使用它，让我们再次使用id？！
它可以在前面的例子中工作，但是看看这个
<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 选择器 - this vs id vs class的主要内容，如果未能解决你的问题，请参考以下文章
jQueryjQuery 简介jQuery 入口函数 vs JavaScript入口函数$(selector).action()jQuery 选择器jQuery 事件this复习！