添加一个类来生成的短代码李项
问题描述:
我有,我有动画一个div
淡入。现在整个div
淡入。大...添加一个类来生成的短代码李项
这里面div
我有一个短代码。这个简码生成一个twitter feed。 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
控制动画。短代码引入了twitter feed并生成了一个列表项:.ktweet
。
基本上我想给data-aos
和data-aos-duration
添加到li
项目,所以我可以动画逐一或者应用不同的动画给他们,而不是动画简码的容器......
答
那么,在查看此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(不recommen DED)
- 进入到插件文件夹(科博 - Twitter的饲料?)
- 搜索这行
echo '<div id="' . $widget_id . '" class="kcontainer">';
和只添加属性或类存在。
答
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>
谢谢红!完美和感谢深入的解释! :) –
谢谢,没问题;) – Red