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

Question

我正在使用插件为每个帖子存储两个缩略图，我为每个帖子缩略图创建了两个 div，并隐藏了第二个，并将其 css 显示属性设置为循环内的“无”。

 <div class='first'><?php the_post_thumbnail()?></div>
 <div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>

当我将鼠标悬停在每个帖子上时使用 java 脚本我想显示第二个 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 个都需要相同事件的 div 怎么办？写 50 行 CSS 显示更改既费时又费空间。如果有办法将这 50 行缩减为一行会怎样？

$('div').mouseenter(function() {

    $(this).css('property','value');

});

那么 this 做了什么？假设您的 HTML 标记如下所示:

<div></div>
<div></div>
<div></div>
<div></div>

并且您想将 CSS 属性应用于悬停的任何 div。上面的 JQuery 说:

"when the mouse enters a div, change the CSS of that particular div"

或者换句话说，更改当前悬停在其上的 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 关键字的实时实现。

我希望这个的回答对你有帮助；)