添加一个类来生成的短代码李项

我有，我有动画一个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项目，所以我可以动画逐一或者应用不同的动画给他们，而不是动画简码的容器......

来源

2017-10-13 Shaun Taylor

那么，在查看此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">';和只添加属性或类存在。

来源

2017-10-13 11:51:37 Red

谢谢红！完美和感谢深入的解释！ :) –

谢谢，没问题;） – Red

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>

来源

2017-10-13 11:44:49 Nick

添加一个类来生成的短代码李项

回答

相关问题