Question

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

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。

最后一件事，我为 quick demo 让您看到了this关键字的实时实施。

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

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

1 个答案: