javascript - 添加一个类到短代码生成的 li 元素

Question

我有一个 div，我设置了淡入动画。现在整个 div 都淡入了。太棒了...

在这个 div 里面我有一个简码。此简码生成一个推特提要。 Twitter 提要生成 li 项。

我想为这些 li 元素之一添加一个类，这样我就可以单独为它设置动画，而不必为整个容器设置动画。

问题是，如何为不在代码中但从短代码生成的 li 项分配一个类？

我的代码在这里:

<div class="pullout" data-aos="fade-right" data-aos-duration="1000">
   <?php echo do_shortcode('[kebo_tweets title="" count="3" style="list" theme="light" offset="false" avatar="off" conversations="false" media="false"]'); ?>
</div>

data-aos 和data-aos-duration 控制动画。短代码引入推特提要并生成一个列表项，其类为:.ktweet。

本质上，我想将 data-aos 和 data-aos-duration 添加到 li 元素中，这样我就可以为它们制作动画通过一个或对它们应用不同的动画而不是为短代码的容器设置动画...

Answer 1

好吧，在查看了这个WordPress插件的源代码后，你不能直接通过短代码添加一个类。

所以你的选择是:

1. 用 JS 添加它们或 jQuery
2. 自行编辑源代码。

选项 1(推荐)

JavaScript

// Get all elements with classname .ktweet
var tweet = document.getElementsByClassName("ktweet");

// Loop through the object
for(var i = 0;i < tweet.length;i++) {
    // Dataset is a set of data stored inside the element as [data-*]
    tweet[i].dataset.aos = "fade-right"; 
    tweet[i].dataset.aosDuration = 1000;
}

jQuery

$(".ktweet").attr("data-aos", "fade-right");
$(".ktweet").attr("data-aos-duration", 1000);

选项 2(不推荐)

• 进入插件文件夹(kebo-twitter-feed？)
• 搜索此行 echo '<div id="' . $widget_id . '" class="kcontainer">';并在那里添加属性或类。