Question

我在WordPress工作并在我的functions.php文件中编写了一个短代码函数：

// shortcode function for call to action boxes
function actionbox( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
    array(
        'image' => 'URL',
        'title' => 'Title',
        'url' => 'Link',
    ), $atts )
);

// Code
return '<a class="ctalink" href="' . $url . '">
<div class="ctabox" style="background-image: url(' . $image . '); width: 350px;">
<div class="ctainner">
<div class="titlebox"><h1 class="ctatitle">' . $title . '</h1></div>
<h4 class="ctabutton">' . $content . '</h4>
</div>
</div></a>';
}
add_shortcode( 'CTA', 'actionbox' );

然后我添加了一些jQuery来为我的短代码创建的号召性用语框添加动画。

问题是，当一切正常时，当我将鼠标悬停在我的一个盒子上时，动画会将其自身应用于所有盒子。

这是我的所有代码： http://jsfiddle.net/sahiba25/kGryV/4/

关于如何将动画放在我实际上正在徘徊的一个盒子上的任何想法？

我已经尝试过addClass，但它将“active”类添加到框的所有实例中。

谢谢！

Answer 1

在您的事件处理程序中，this是事件的目标。所以在你的情况下，你可以这样做：

$('.ctainner', this)

选择具有类.ctainner的元素，这些元素是事件目标的后代。

另一种选择是：

$(this).find('.ctainner')

基本上做同样的事情。

仅将动画添加到类的一个实例中

1 个答案: