Javascript MySQL/jQuery：获取表结果，传递到jQuery数组中，一次仅显示6个，并随机旋转结果

我在MySQL表中有12个用户。他们的ID可以是任意的，因为他们的ID是随机生成的（但这是另一回事）

为了方便起见，让我们假设ID是1-12

我还将用户配置文件照片存储在一个目录中：

Directory=

data/profiles/users/profile_img/{USER_ID}/main.jpg

我正在运行一个MySQL查询（工作正常）来获取所有12个用户的用户名。然后，我将这些ID传递到一个jquery数组中，并通过一个函数将它们放入其中，该函数通过更改图像类src属性来随机化这些ID在页面上作为图像显示的顺序—这一位是使用jquery完成的

请注意，我使用随机函数，因为我只希望在任何给定时间以随机顺序显示12个结果中的6个

这可以工作，图像以随机顺序显示，并每5秒旋转/更改一次

但是，围绕我的图像的是一个href类“premium\u component\u link”。我想将每个配置文件图像链接到相应的用户配置文件页面

我试着这样使用这个家长：

$(this).parent(".premium_component_link").attr('href','profile.php?p_id=' + displayImage()) 

我遇到的问题是displayImage（）正在重新生成一个单独的随机用户id，因此当用户单击它时，显示的图像与配置文件链接不相关

有点离题，但最终我还想从用户id匹配的表中获取用户名和位置，并将它们放在我的类“h3 class=“mt-4”之间-但我不知道我将如何做到这一点，也不认为我应该在走路之前跑步

在函数每次出现时，是否可以将displayImage（）的一个实例同时传递给这两个属性href和src

代码：

---

您可以将displayImage（）的结果存储到一个变量中，并根据需要多次使用它，而无需再次调用该函数。这是最基本的编程概念…就像爬行（在您的术语中）一样

您的数组索引与用户id相同，但在javascript中，您正在从1到\u个图像循环。您需要将数组索引为0到\u个记录…执行以下操作：

替换此项：

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++;
}

---

对于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>

---

谢谢。不过，我最初确实尝试将其存储为变量……但由于某些原因，jquery完全停止运行。当我尝试使用您的代码时，同样的问题不幸的是，现在似乎可以正常工作。尽管我有一个用户的用户id为100，但这不会显示。这是因为变量中的ImageIndexes设置为0-11吗？如果是这样，我有没有办法改进它以适应任何0-1000或更高的整数值？事实上，表中总共只有12个用户，但是他们的用户id并不总是1-12。您有没有办法在这方面提供额外的支持？这是因为您的数组索引与用户id相同，但在javascript中，您是从1循环的通过数字图像。您需要将数组索引为0到数字记录。我已经更新了代码以包含这一点。我很困惑。我如何实现这一代码？我是否删除了Var usedImages Count？如果我这样做，那么mysql结果在哪里传递到javascript？@Newad Khan请查看您答案中附带的我的代码编辑。Pl请检查一下我的实现是否正确？谢谢，这看起来工作顺利多了。不过，我向我们的朋友@Nawed Khan指出了同样的问题。我的mysql表中并非所有的用户ID都是1-12。这只是一个示例。我的用户ID是8位整数，比如12345678或0134546。它们不会是1-12。在我测试代码，它可以在用户id 1-12上工作，但不能在用户id 44456784上工作。我认为这与imageIndexes有关。有没有办法更改它以适应此要求？thanks@M.Obren我明白了；我已经更正了我的答案，对实际的imageArray进行了洗牌。但是，要使其与PHP一起工作，您必须更改以下内容：
$new_array[$p_id]=$row['user_id']；
到此：
$new_array[]=$p_id；
将持续将$p_id元素附加到数组的末尾。
$i = 0;
while($row = $result->fetch_assoc()) {    
   $new_array[$i] = $row['user_id'];
   $i++;
}

<?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>