我正在使用插件为每个帖子存储两个缩略图,我为每个帖子缩略图创建了两个div,并隐藏了第二个,其中css显示属性在循环内设置为“none”。
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
当我将鼠标悬停在每个帖子上时使用java脚本我想显示第二个div并隐藏第一个div但是我编写的代码会更改所有显示属性,而是将鼠标悬停在任何缩略图上。
如何知道光标悬停在哪个帖子上并仅更改该帖子的缩略图显示属性?
function() {
console.info('in');
$('.first').css('display','none');
$('.second').css('display','block');
},
function() {
$('.second').css('display','none');
$('.first').css('display','block');
//$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
答案 0 :(得分:2)
您正在寻找JavaScript和JQuery this
关键字。
this
关键字是什么? this
指向调用函数的对象。起初听起来很混乱但是看几个简单的例子可以澄清任何混乱。例如,在您的情况下,您需要知道正在悬停的div
。你现在正在做的是为每个对象编写一个单独的事件,它在某些情况下有效,但显然遇到了多个问题。
首先是你的问题。你怎么知道哪一个正在盘旋?但是你可能会遇到另一个问题。如果您有50 divs
所有人都需要相同的活动怎么办?编写50行CSS显示更改既费时又占用空间。如果有办法将这50行减少到一行呢?
$('div').mouseenter(function() {
$(this).css('property','value');
});
那么this
做了什么?说你的HTML标记看起来像这样:
<div></div>
<div></div>
<div></div>
<div></div>
并且您希望将CSS属性应用于悬停在其中的任何div
。上面的JQuery说:
“当鼠标进入div时,更改 特定div”的CSS
或者换句话说,更改当前正在徘徊的this
div。
显然,这个想法(双关语)可用于多种方式来显着缩短JavaScript编程。如果你想更多地了解this
的文档,那里有很多好的资源。以下是一些:
http://www.quirksmode.org/js/this.html
http://learn.jquery.com/javascript-101/this-keyword/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
我花了一段时间才掌握,但一旦我做了,肯定会改进我的JS编程。另外需要注意的是:$(this)
仅适用于JQuery,在JavaScript中它只是this
。显然,您也可以在JQuery中使用更简单的版本this
。
最后一件事,我为 quick demo 让您看到了this
关键字的实时实施。
我希望这个的答案对你有帮助;)