如何在wordpress中的每个图像下方或上方添加div

时间:2017-09-24 09:23:23

标签: javascript jquery wordpress

我的图片类是“鼠标悬停”。

我正在使用此代码在最后一张图片下添加class =“boxbut”。

    function ads_added_above_last_p6($text) {
    if( is_single()) :
        $ads_text = '<div class="boxbut" style="text-align: center;"> 
</div>
';
        if($pos1 = strrpos($text, '<img class="mouseover">')){
            $text1 = substr($text, 0, $pos1);
            $text2 = substr($text, $pos1);
            $text = $text1 . $ads_text . $text2;
        }


        endif;
    return $text;
    }
add_filter('the_content', 'ads_added_above_last_p6');

如何在所有图像下添加此div。或将鼠标悬停在所有图像上。

1 个答案:

答案 0 :(得分:1)

您可以应用一些JS代码来做您想做的事情:

jQuery("img.mouseover").each(function() {
  jQuery(this).replaceWith("<div class='some_p'>" + jQuery(this).clone().wrap('<p>').parent().html() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="mouseover" src="http://via.placeholder.com/350x150" />

<div class="some_class">
  <img class="mouseover" src="http://via.placeholder.com/350x150" />
</div>

然后我们可以添加一些CSS来应用你想要的逻辑。