添加一個類來生成的短代碼李項

我有，我有動畫一個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

添加一個類來生成的短代碼李項

回答

相關問題