当我将鼠标悬停在wordpress循环中的每个帖子上时的不同操作

时间:2013-09-19 04:33:21

标签: javascript php jquery css wordpress

我正在使用插件为每个帖子存储两个缩略图,我为每个帖子缩略图创建了两个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();
                });

1 个答案:

答案 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关键字的实时实施。

我希望这个的答案对你有帮助;)