javascript - 从 MYSQL 表中获取 user_id 并使用 Jquery 设置 HTML 属性(img src、href 链接、h3 标签)
问题描述
我正在尝试通过运行 mysql 查询从表中获取用户 user_id 和 name。
我的表中总共有 12 个用户/行数据,我只想在任何给定时间显示 6 个结果。
目的是通过将存储图像的目录与用户唯一的 user_id 相结合来显示用户的个人资料图像:
data/profiles/users/profile_img/{users_id}/main.jpg
然后图像每 5 秒旋转一次(随机),使用 JQUERY 更新 img src 属性。
除此之外,我正在使用用户 user_id 设置一个 href 链接,以便用户可以单击图像并被带到该用户的个人资料。
这一切都很好。但是,我还想在<h3>
每个元素的 html 属性中显示用户名。
我似乎很难做到这一点。我没有在每个元素上获取一个用户名,而是在每个元素上获取所有用户名。
请问有人可以告诉我我哪里出错了吗?
代码:
<?php $result = $conn->query("SELECT * FROM user_data, user_locations WHERE user_data.user_id = user_locations.user_id AND user_data.advert_type = 'Deluxe' AND user_data.advert_status = 'Active' ");
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$p_id = $row['user_id'];
$name = $row['first_name'] . ' ' . $row['last_name'];
$new_array[] = $p_id;
$new_array2[] = $name;
}
}
echo '<script>';
echo 'var imagesArray = ' . json_encode($new_array) . ';';
echo 'var imagesArray2 = ' . json_encode($new_array2) . ';';
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 = $(".deluxe_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);
var randomIDs2 = shuffle(imagesArray2).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(".deluxe_component_link").attr('href', 'profile.php?p_id=' + randomIDs[idx]);
$("h3.deluxe_title").text(randomIDs2);
});
}
$(document).ready(function () {
changeComponent();
setInterval(function() {
changeComponent();
}, 10000);
})
</script>
<div class="deluxe_listing_container">
<?php
//Echo out results
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
?>
</div>
解决方案
请尝试以下内容,并阅读所有评论,以便您了解更改。
<?php $result = $conn->query("SELECT * FROM user_data, user_locations WHERE user_data.user_id = user_locations.user_id AND user_data.advert_type = 'Deluxe' AND user_data.advert_status = 'Active' ");
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$p_id = $row['user_id'];
$name = $row['first_name'] . ' ' . $row['last_name'];
// have 1 array, but each element is an array containing both name and id. this will keep the data together even when you shuffle later
$new_array[] = array('p_id' => $p_id, 'name' => $name);
}
}
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() {
// get all the component containers
var $allComponents = $(".deluxe_component");
// take X random people by shuffling the list and taking the first X
// (slice by .length dynamically, in case you ever need more or less than exactly 6)
var randomPeople = shuffle(imagesArray).slice(0, $allComponents.length);
// iterate over each image, using the index of the iteration.
$allComponents.each(function (idx) {
// find the image element in this component and add the src, using the 'p_id' field of this particular randomPeople[idx]
$(this).find('.deluxe_ad_img').attr('src', 'data/profiles/users/profile_img/' + randomPeople[idx]['p_id'] + '/main.jpg');
// find the link element in this component and add the href, using the 'p_id' field of this particular randomPeople[idx]
$(this).find(".deluxe_component_link").attr('href', 'profile.php?p_id=' + randomPeople[idx]['p_id']);
// find the h3 element in this component and add the name, using the 'name' field of this particular randomPeople[idx]
$(this).find("h3.deluxe_title").text(randomPeople[idx]['name']);
});
}
$(document).ready(function () {
changeComponent();
setInterval(function() {
changeComponent();
}, 10000);
})
</script>
<div class="deluxe_listing_container">
<?php
//Echo out results
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
echo '<div class="deluxe_component"><a href="" class="deluxe_component_link">';
echo '<img class="deluxe_ad_img" src="" height="auto" width="auto" />';
echo '<h3 class="deluxe_title"></h3><p class="deluxe_subtitle"></p></a></div>';
?>
</div>
推荐阅读
- javascript - 在同一个 NodeJS 进程上运行的 http 服务器和 websocket 服务器可以在本地相互通信吗?
- javascript - Nestjs i18n 中的多种后备语言
- python - 如何在python的数据库中从编码的base64字符串显示解码的base64 pdf文件?
- velo - 如何在wix编辑器corvid中制作可导航的屏幕截图
- django - 使用 Django 创建同步(实时和离线)的最佳实践或模式是什么?
- c# - 如何在 ASP.NET MVC 中使用 C# 仅编辑数据库集合(azure Cosmosdb)中的必填字段
- java - Selenium Java 未找到下拉菜单元素
- r - 如何将插入符号训练的随机森林模型输入到 predict() 和 performance() 函数中?
- wordpress - 更改旧的 WordPress 图像目录
- python - Pygame-我收到一个错误:ValueError:表面区域外的次表面矩形。如何解决?