Trigger modal if div has specific classe and specific id-CodePudding

I am trying to replicate this memory game and I would like to trigger Modals (Bootstrap) every time a pair matches.

So in this case 12 cards means a total of 6 different Modals.

As every div have a unique ID, how can I trigger the modal when the div has class matched and the id is 3?

Many thanks

UPDATE: I would like to redirect to a new page after the last Modal is closed.

Right now I have this in JS but is not right because when te last cards match it shows directly the JS script and the last modal is not visible

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

CodePudding user response：

You can use the same modal for your purpose, I don't think you need one for every pair.

Card game credits: 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 >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="http://melissacabral.com/demos/javascript/images/socks/background.png">
            </div>
            <div >
                <img src="">
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modal-socks" >
            </div>
            <div >
                <button type="button"  data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>