Question

我正在用jQuery做一个简单的记忆游戏。我有八个img标签和带有八张图片的“ imgs”数组（它们加倍）。我希望每个img在'imgs'数组中都有一个唯一的src（以便每个img元素都有其'匹配项）。谁能帮我，使图像不再重复？我知道可以用纯JS完成，但我需要jQuery ...非常感谢您的时间:)

$(document).ready(() => {

    const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
    'https://img.icons8.com/color/96/000000/cookie-monster.png', 
    'https://img.icons8.com/color/96/000000/chewbacca.png', 
    'https://img.icons8.com/color/96/000000/avatar.png', 
    'https://img.icons8.com/color/100/000000/smurf.png', 
    'https://img.icons8.com/color/96/000000/cookie-monster.png', 
    'https://img.icons8.com/color/96/000000/chewbacca.png', 
    'https://img.icons8.com/color/96/000000/avatar.png'];

 
    $('.card').flip();

    $('img').each((i, item) => {

    $(item).attr('src', function() {
        const imgsCopy = imgs.slice();
        const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
        return src
    })
  })
});

body {
    margin: 0 auto;
    text-align: center;
}

#game-container {
    padding: 3% 10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.card {
    width: 200px;
    height: 200px;
    margin: 20px 20px;
}

.front {
    background-color: lightblue;
}

.back {
    background-color: lightskyblue;
    box-sizing: border-box;
    padding: 25% 20%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Memory Game</title>
        <link rel="stylesheet" type="text/css" href="memory.css" />
    </head>
    <body>
        <div id="game-container">
            
        <!--CARD 1-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 1-->

        <!--CARD 2-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 2-->

        <!--CARD 3-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 3-->

        <!--CARD 4-->
        <div class="card">
             <div class="front">
    
            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 4-->

        <!--CARD 5-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 5-->

        <!--CARD 6-->
        <div class="card">
            <div class="front">
       
           </div>
           <div class="back">
                <img src="">
           </div>
        </div>
        <!--THE END OF CARD 6-->
        
        <!--CARD 7-->
        <div class="card">
            <div class="front">

            </div>
            <div class="back">
                <img src="">
            </div>
        </div>
        <!--THE END OF CARD 7-->

        <!--CARD 8-->
        <div class="card">
            <div class="front">
    
           </div>
           <div class="back">
                <img src="">
           </div>
        </div>
        <!--THE END OF CARD 8-->
        </div>

        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
        <script src="memory.js"></script>
    </body>
</html>

Answer 1

好的，我犯了一个小错误！我从jQuery'each'语句中取出了const imgsCopy = imgs.slice();，它的工作正常！ :)再次感谢您的光临！

$(document).ready(() => {

        $('.card').flip();

        const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
        'https://img.icons8.com/color/96/000000/cookie-monster.png', 
        'https://img.icons8.com/color/96/000000/chewbacca.png', 
        'https://img.icons8.com/color/96/000000/avatar.png', 
        'https://img.icons8.com/color/100/000000/smurf.png', 
        'https://img.icons8.com/color/96/000000/cookie-monster.png', 
        'https://img.icons8.com/color/96/000000/chewbacca.png', 
        'https://img.icons8.com/color/96/000000/avatar.png'];

        const imgsCopy = imgs.slice();


        $('img').each((i, item) => {
            $(item).attr('src', function() {
                const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
                return src
            })
          })
    });

如何不在jQuery中重复图像的随机src？

1 个答案: