Question

我有一个div我已经动画淡入。现在整个div渐渐消失。很棒......

在这个div里面我有一个短代码。此短代码生成Twitter提要。 Twitter Feed生成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控制动画。短代码会引入twitter提要并生成一个列表项，其中包含类：.ktweet。

基本上我想将data-aos和data-aos-duration添加到li项目中，这样我就可以逐个动画或对它们应用不同的动画，而不是动画容器的动画。短码...

Answer 1

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

所以你有的选择是：

使用JS或jQuery
编辑源代码本身。

选项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">';，然后在那里添加属性或类。

Answer 2

php短代码应该在页面加载之前生成<li>元素，所以你应该能够通过javascript完成它。

<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>

<script>
  document.querySelector('.pullout li').classList.add('MyClass');
</script>

添加一个类来对生成的项目

2 个答案: