如果div具有特定的類和特定的id，則觸發模式-有解無憂

我正在嘗試復制這個記憶游戲，并且我想在每次配對時觸發 Modals（Bootstrap）。

所以在這種情況下，12 張牌意味著總共 6 種不同的 Modals。

class 由于每個 div 都有一個唯一的 ID，當 div匹配并且id是3時，如何觸發模式？

非常感謝

更新：我想在最后一個模態關閉后重定向到新頁面。

現在我在 JS 中有這個但不正確，因為當最后一張卡片匹配時，它直接顯示 JS 腳本并且最后一個模態不可見。

uj5u.com熱心網友回復：

您可以為您的目的使用相同的模態，我認為您不需要每對都需要一個。

紙牌游戲學分：https ://codepen.io/melissacabral/pen/MbGdma (@melissacabral)

var modalToggle = document.getElementById('exampleModal') // relatedTarget
var myModal = new bootstrap.Modal(modalToggle, {
    keyboard: false
})
var url = 'http://melissacabral.com/demos/javascript/images/socks/';
//each desired card is an item in this array
var socks = ['blue', 'gray', 'green', 'pink', 'purple', 'red', 'blue', 'gray', 'green', 'pink', 'purple', 'red'];

//keep track of the number of moves
var clicks = 0;

//variables to hold the 2 clicked socks
var sock1 = '';
var sock2 = '';
var sock1Id = '';
var sock2Id = '';

//put unique IDs on each card on the board
$('.flip').each(function(i) {
    $(this).attr('id', i   1);
});

$('.back img').each(function(i) {
    var theSock = ''   socks.splice(getRandomInt(0, socks.length - 1), 1);
    var theCard = $(this).parent().parent();
    theCard.addClass(theSock);
    $(this).attr('src', url   theSock   'sock.png')
});

function getRandomInt(min, max) {
    return Math.ceil(Math.random() * (max - min)   min);
}

$('.flip').click(function(e) {
    var theCard = $(this).find('.card');

    //allow only 2 flipped cards?
    if ($('.flipped').length < 2) {
        theCard.addClass('flipped');
        var classList = theCard.attr('class');

        classList = classList.split(' ');

        var theColor = classList[1];
        if (sock1 == '') {
            sock1 = theColor;
            sock1Id = theCard.parent().attr('id');
        } else {
            sock2 = theColor;
            sock2Id = theCard.parent().attr('id');
            checkMatch(theColor);
        }

    }

});

function pink(){
  let markup = 
    `
    <div >
      <div >
        HTML only for Pink
      </div>
    </div>
    `;
    
    return markup;
}

function red(){
  let markup = 
    `
    <div >
      <div >
        HTML only for Red
      </div>
    </div>
    `;
    
    return markup;
}

function green(){
  let markup = 
    `
    <div >
      <div >
        HTML only for Green
      </div>
    </div>
    `;
    
    return markup;
}

function gray(){
  let markup = 
    `
    <div >
      <div >
        HTML only for Gray
      </div>
    </div>
    `;
    
    return markup;
}

function blue(){
  let markup = 
    `
    <div >
      <div >
        HTML only for Blue
      </div>
    </div>
    `;
    
    return markup;
}

function checkMatch(theColor) {
    if (sock1 == sock2 && sock2Id != sock1Id) {
        $('#modal-socks').html(window[theColor]());
        myModal.show(modalToggle);
        $('.'   sock2   '.flipped').parent().off().addClass('matched');
        $('.'   sock2   '.flipped .front img').attr('src', url   'match.png');
        $('.'   sock2   '.flipped .back').removeClass('back face');
        $('.'   sock2   '.flipped .front').css({
            'background-color': 'transparent'
        });
        //call flipback and checkwin here
        setTimeout(flipBack, 800);
        checkWin();
    } else {
        //call flipback
        setTimeout(flipBack, 800);
    }
}

function flipBack() {
    $('.flipped').removeClass('flipped');
    sock1 = '';
    sock2 = '';
    sock1Id = '';
    sock2Id = '';
}

function checkWin() {
    if ($('.matched').length == $('.flip').length) {
        //all the cards are matched
        message = '<h2>You have matched all the socks!</h2>';
        $('#stage').prepend('div').html(message);
    }
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

body {
    font-family: calibri, sans-serif;
}

h1 {
    width: 100%;
    text-align: center;
}

#stage {
    margin: 0 auto;
    width: 524px;
    text-align: center;
}

.flip {
    -webkit-perspective: 800;
    position: relative;
    margin: 50px auto;
    height: 220px;
    width: 121px;
    float: left;
    margin: 5px;
}

.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
}

.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
}

.flip .card .front {
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

.flip .card .back {
    -webkit-transform: rotatey(-180deg);
    cursor: pointer;
}

.button {
    text-align: center;
    background-color: cadetblue;
    font-size: 2.25em;
    padding: 0.25em;
    width: 220px;
    margin: 0 auto;
    margin-top: 30px;
    color: white;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
}

.green {
    background: lightgreen;
    border: solid 5px lightgreen;
}

.pink {
    background: pink;
    border: solid 5px pink;
}

.blue {
    background: skyblue;
    border: solid 5px skyblue;
}

.gray {
    background: lightgray;
    border: solid 5px lightgray;
}

.red {
    background: lightsalmon;
    border: solid 5px lightsalmon;
}

.purple {
    background: thistle;
    border: solid 5px thistle;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h1>Match the Socks</h1>
<div id="stage">
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
    <div class="flip">
        <div class="card">
            <div class="face front">
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div class="face back">
                <img src="">
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modal-socks" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/414708.html

標籤：

上一篇：Bootstrap，在移動設備上文本不能很好地對齊

下一篇：如何使用ng-forms顯示當前時間