当我将鼠标悬停在WordPress循环中的每个帖子上时，不同的操作 - different actions when I hover over each post in the wordpress loop

different actions when I hover over each post in the wordpress loop

我正在使用一个插件为每个帖子存储两个缩略图，我为每个帖子缩略图创建了两个div，并隐藏了第二个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();
                });

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"

或者换句话说，更改当前悬停thisdiv。

显然，这个想法（双关语）可以用很多方式来显着缩短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关键字的实时实现。

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