1

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

1 回答 1

2

JavaScript 和 JQuerythis关键字正是您要寻找的。

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悬停的 s。上面的 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. 显然，您也可以this在 JQuery 中使用更简单的版本 , 。

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

我希望这个答案对你有帮助；）

于 2013-09-19T05:26:54.437 回答