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

Question

我正在使用一个插件为每个帖子存储两个缩略图，并且为每个帖子缩略图创建了两个div，并在循环内将css display属性设置为“ 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();
                });

Answer 1

您正在寻找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 。

最后一件事，我为您做了一个快速演示 ，以演示 this关键字的实时实现。

我希望这个答案对您有帮助;）