如何使用 Jquery 处理 Wordpress 中的单个帖子答案

【问题标题】：How to use Jquery to address individual posts in Wordpress如何使用 Jquery 处理 Wordpress 中的单个帖子
【发布时间】：2010-01-12 06:39:58
【问题描述】：

我目前正在设计一个 wordpress 主题，我需要一些 javascript 来实现悬停效果。我正在使用 Wordpress Jquery + Jquery Color Animations 插件。

结构：

我使用 div (class="post") 作为 wordpress 帖子的容器，在“post” div 中，我有一个 span (class="title") 用于显示标题发帖。

我想做的是：

当用户将鼠标悬停在“post”div上时：

".title" spans 的背景颜色从黑色渐变为红色。
当用户悬停时（OnMouserOut）“发布” div：

".title" spans 的背景颜色变回黑色。

守则

$j(document).ready(function(){
    $j(".posts").hover(function(){
    $j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
    },function(){
    $j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
    });
    });

问题

代码有效，除非用户将鼠标悬停在任何“帖子”div 上，所有“标题”跨度都会改变颜色。所以我的问题是，如何定位代码以仅处理处于悬停状态的“帖子”div 中的“标题”范围？

任何帮助将不胜感激，

干杯，

画了。

【问题讨论】：

标签： jquery

【解决方案1】：

您需要获取“标题”span 元素，它是当前悬停的“帖子”的后代：

$j(document).ready(function(){
  $j(".posts").hover(function(){
    $j(".title", this).animate({ backgroundColor: "#FF0062" }, 300);
    // or $j(this).find(".title")
  },function(){
    $j(".title", this).animate({ backgroundColor: "#231F20" }, 300);
  });
});

两个偶数处理函数中的this关键字，指的是当前悬停的“post”元素。

我使用jQuery function的context参数，这与使用Traversing/find方法完全相同。

【讨论】：

非常感谢，你是救命稻草！