[英]MySQL/jQuery: fetch table results, pass into a jQuery array, show only 6 at a time and rotate results at random
我在 MySQL 表中有 12 个用户。 他们的 ID 可以是任何东西,因为他们的 ID 是随机生成的(但那是另一回事)。
为方便起见,我们假设 ID 为 1-12。
我还将用户个人资料照片存储在目录中:
目录 = data/profiles/users/profile_img/{USER_ID}/main.jpg
我正在运行一个 MySQL 查询(工作正常)来获取所有 12 个用户的 user_id。 然后我将这些 ID 传递到一个 jquery 数组中,并将它们放入一个函数中,该函数通过更改图像类 src 属性来随机化这些在页面上显示为图像的顺序——这部分是使用 jQuery 完成的。
注意我使用随机函数是因为我只想在任何给定时间以随机顺序显示 12 个结果中的 6 个。
这是有效的,图像以随机顺序显示,每 5 秒旋转/更改一次。
但是,围绕我的图像是一个 href 类“premium_component_link”。 我想将每个个人资料图片链接到其相应的用户个人资料页面。
我试图通过使用这个父对象来做到这一点:
$(this).parent(".premium_component_link").attr('href','profile.php?p_id=' + displayImage())
我遇到的问题是 displayImage() 正在重新生成一个单独的随机 user_id,因此当用户单击它时,显示的图像与个人资料链接不相关。
有点离题,但最终我也想从我的表中获取用户名和位置,其中 user_id 匹配并将它们放在我的类“h3 class =“mt-4”之间 - 但我不知道我是怎么做的我还打算这样做,而且在我走路之前我不应该跑。
无论如何,我可以在每次出现该函数时将 displayImage() 的一个实例一起传递给这两个属性 href 和 src 吗?
代码:
<?php $result = $conn->query("SELECT * FROM user_data WHERE advert_type = 'Deluxe'");
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$p_id = $row['user_id'];
$new_array[$p_id] = $row['user_id'];
echo '<script>';
echo 'var imagesArray = ' . json_encode($new_array) . ';';
echo '</script>';
?>
<script>
var usedImages = {};
var usedImagesCount = 0;
var imageIndexes = [0,1,2,3,4,5,6,7,8,9,10,11]
function displayImage() {
var index = Math.floor(Math.random() * (imageIndexes.length));
var num = imageIndexes[index]
var result = imagesArray[num];
imageIndexes.splice(index, 1)
if (imageIndexes.length === 0) {
imageIndexes = [0,1,2,3,4,5,6,7,8,9,10,11]
}
return result
}
function changeImagesSrc() {
$(".premium_ad_img").each(function () {
$(this).attr('src','data/profiles/users/profile_img/' + displayImage()) + '/main.jpg')
$(this).parent(".premium_component_link").attr('href','profile.php?p_id=' + displayImage())
}) //End Change IMage
} //End Function Change
$(document).ready(function () {
changeImagesSrc()
setInterval(function() {
changeImagesSrc()
}, 5000);
})
</script>
<? } } ?>
<?php
//Echo out results
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
echo '<div class="premium_component"><a href="" class="premium_component_link">';
echo '<img class="premium_ad_img" src="" height="auto" width="auto" />';
echo '<div class=" choose-grid"><h3 class="mt-4">Mark London</h3><p class="">25, London UK</p></div></a></div>';
?>
对于你的 javascript 标签,你真的只需要一个 shuffle 函数和一个全包的 changeComponent 函数,它可以在每个间隔心跳中完成所有工作。 此外,您会注意到 jQuery 有一个更有用的 each() 函数版本,它提供当前元素的索引:
<?php $result = $conn->query("SELECT * FROM user_data WHERE advert_type = 'Deluxe'");
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$p_id = $row['user_id'];
$new_array[] = $p_id;
}
}
echo '<script>';
echo 'var imagesArray = ' . json_encode($new_array) . ';';
echo '</script>';
?>
<script>
//Good shuffle algorithm: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function changeComponent() {
// store image query in a variable
var $allImages = $(".premium_ad_img");
// take X random IDs by shuffling the list and taking the first X
// (slice total dynamically, in case you ever need more or less than exactly 6)
var randomIDs = shuffle(imagesArray).slice(0, $allImages.length);
// iterate over each image, using the index of the iteration.
$allImages.each(function (idx) {
$(this).attr('src', 'data/profiles/users/profile_img/' + randomIDs[idx] + '/main.jpg');
$(this).parent(".premium_component_link").attr('href', 'profile.php?p_id=' + randomIDs[idx]);
});
}
$(document).ready(function () {
changeComponent();
setInterval(function() {
changeComponent();
}, 5000);
})
</script>
您可以将 displayImage() 的结果存储到一个变量中,并根据需要多次使用它,而无需再次调用该函数。 这是最基本的编程概念......就像爬行(用你的话)。
function changeImagesSrc() {
$(".premium_ad_img").each(function () {
var display = displayImage();
$(this).attr('src','data/profiles/users/profile_img/' + display + '/main.jpg');
$(this).parent(".premium_component_link").attr('href','profile.php?p_id=' + display);
});
}
您的数组索引与用户 ID 相同,但在您的 javascript 中,您从 1 到 number_of_images 循环。 您需要通过 number_of_records 将数组索引为 0 ... 执行以下操作:
替换这个:
while($row = $result->fetch_assoc()) {
$p_id = $row['user_id'];
$new_array[$p_id] = $row['user_id'];
有了这个:
$i = 0;
while($row = $result->fetch_assoc()) {
$new_array[$i] = $row['user_id'];
$i++;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.