如果 div 具有特定的类和特定的 id，则触发模式答案

【问题标题】：Trigger modal if div has specific classe and specific id如果 div 具有特定的类和特定的 id，则触发模式
【发布时间】：2022-01-14 17:46:19
【问题描述】：

我正在尝试复制 this memory game，并且我想在每次匹配时触发 Modals (Bootstrap)。

所以在这种情况下，12 张卡片意味着总共 6 个不同的模态。

由于每个 div 都有唯一的 ID，当 div 具有 class 匹配并且 id 是 3 时，如何触发模态？

非常感谢

更新：我想在最后一个 Modal 关闭后重定向到新页面。

现在我在 JS 中有这个但不正确，因为当最后一张卡片匹配时，它直接显示 JS 脚本并且最后一个模态不可见。

【问题讨论】：

只需对 div 类进行 if 检查并使用 model.show() 显示模型。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以为您的目的使用相同的模态，我认为您不需要每对都需要一个。

纸牌游戏学分：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 class="pink-match">
      <div class="inner">
        HTML only for Pink
      </div>
    </div>
    `;
    
    return markup;
}

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

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

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

function blue(){
  let markup = 
    `
    <div class="blue-match">
      <div class="inner">
        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/bootstrap@5.0.2/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/bootstrap@5.0.2/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>

【讨论】：

非常感谢您的回答！我需要触发 6 个不同的模态，因为每个模态都有不同的内容。这可能吗？
现在每个模态都有不同的内容。测试一下;)
哇，谢谢！ :D 我有一个问题：是否可以在模式中添加除该文本之外的其他内容？例如，如果 2 个绿色袜子匹配，我想显示的不仅仅是该文本。例如 2 列 Bootstrap 布局。如果 2 只红袜子匹配别的东西
@A-creative，当然，我更新了答案，指出你可以在脚本中的哪个位置添加所需的html。
它就像一个魅力：D。非常感谢！