[英]How to get a random element from multiple elements with the same class
我有一個包含一些假銷售通知元素的列表。 它們都具有相同的 class。 使用我得到的代碼,所有通知都會同時顯示,但我每次只需要顯示 1 個隨機通知。 我怎樣才能做到這一點?
這是我目前的代碼:
PHP 生成元素:
$notification .= '
<section class="custom-social-proof">
<div class="custom-notification">';
// Get fake sale notification info
$specarticles = '
SELECT
c.alias as content_alias,
c.title as content_title,
c.catid,
c.state,
c.featured,
c.images,
ca.id,
ca.published,
ca.title as cat_title,
ca.alias as cat_alias
FROM snm_content c
LEFT JOIN snm_categories ca
ON c.catid = ca.id
WHERE c.featured = 1
AND c.state = 1
AND ca.published = 1';
$specarticlescon = $conn->query($specarticles);
while($specarticles = $specarticlescon->fetch_assoc()){
$imagesjson = json_decode($specarticles['images']);
if(!empty($imagesjson->image_intro)){
$image = 'https://website.nl/cms/'.$imagesjson->image_intro;
}else{
$image = '';
}
$notification .= '
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="'.$image.'">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Piet De Graaf - Spijkenisse<br>reserveerde <a href="'.$specarticles['cat_alias'].'/'.$specarticles['content_alias'].'">'.$specarticles['content_title'].'</a>
<small>vandaag</small>
</p>
</div>
</div>';
}
$notification .= '
<div class="custom-close"></div>
</div>
</section>';
echo $notification;
還有我的 jquery:
setInterval(function(){ tpj(".custom-social-proof").stop().slideToggle('slow'); }, 8000);
tpj(".custom-close").click(function() {
tpj(".custom-social-proof").stop().slideToggle('slow');
});
我發現你可以用eq
得到一些隨機的東西。 所以我嘗試了以下方法:
var len = tpj(".custom-social-proof").length;
var random = Math.floor( Math.random() * len ) + 1;
setInterval(function(){ tpj(".custom-social-proof").eq(random).stop().slideToggle('slow'); }, 8000);
tpj(".custom-close").click(function() {
tpj(".custom-social-proof").stop().slideToggle('slow');
});
但這會阻止通知完全顯示。 我究竟做錯了什么?
您需要在setInterval
內傳遞隨機並隱藏所有相同的元素 class 切換。
請試試。 現在您需要檢測元素是否已經切換。
var len = $(".custom-social-proof").length; var random = 0; setInterval(function(){ random = Math.floor( Math.random() * len ); $(".custom-social-proof").hide('slow'); $(".custom-social-proof").eq(random).stop().slideToggle('slow'); }, 1000);
.custom-social-proof{ display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="custom-social-proof">1</section> <section class="custom-social-proof">2</section> <section class="custom-social-proof">3</section> <section class="custom-social-proof">4</section> <section class="custom-social-proof">5</section>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.