Fatal编程技术网
  • javascript/
  • Javascript 当某些框（多个div）变成正确的颜色时，如何触发弹出窗口？

Javascript 当某些框（多个div）变成正确的颜色时，如何触发弹出窗口？

javascript jquery html css

Javascript 当某些框（多个div）变成正确的颜色时，如何触发弹出窗口？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个互动拼图，用户应该改变特定块的颜色，以便制作图像。在这种情况下，我希望在所有特定块都是X颜色时出现一个弹出窗口（当前隐藏的弹出窗口）。我知道如何触发一键弹出，但我不知道如何使其在多个框的颜色正确时，弹出窗口显示以使玩家进入下一个谜题。我悲伤的尝试可以在JS的底部找到（音频现在并不重要） 这是我的HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我正在制作一个互动拼图，用户应该改变特定块的颜色，以便制作图像。在这种情况下，我希望在所有特定块都是X颜色时出现一个弹出窗口（当前隐藏的弹出窗口）。我知道如何触发一键弹出，但我不知道如何使其在多个框的颜色正确时，弹出窗口显示以使玩家进入下一个谜题。我悲伤的尝试可以在JS的底部找到（音频现在并不重要）

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Block Party</title>
      <link rel="stylesheet" href="gridtest.css">
  </head>
<body>
  <div class="boxorganization">
    <div class="popup">
      <div class="congrats">puzzle <br>complete!</div>
      <div class="next">next</div>
    </div>
<!-- 20 boxes per group MAGENTA BOXES-->
      <div class="box" id="specialbox"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
      <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
以下是JS：

    // INDEX TITLE HOVER EFFECT

$(".title").hover(function () {
  $(".title").addClass("titlehover");}, function () {
  $(".title").removeClass("titlehover");

});


// INSTRUCTIONS HOVER EFFECT

$(".instructions").hover(function () {
  $(".instructions").addClass("instructionshover");}, function () {
  $(".instructions").removeClass("instructionshover");

});

// TITLE PAGE FADE INS

$(document).ready(function(){
    $(".title").hide(0).delay(100).fadeIn(2000)
});

$(document).ready(function(){
    $(".by").hide(0).delay(700).fadeIn(2000)
});




// PAGE 1 TITLE EFFECT

$(".text").hover(function () {
  $(".text").addClass("texthover");}, function () {
  $(".text").removeClass("texthover");

});



//  BOX SOUNDS
//
// $('.box').click(function()){
//   $(this).play('coin.mp3')
// });






//  box color

$('.box').click(function(){
  $(this).addClass(function(index,currentClass){
    console.log(currentClass)

    if(currentClass == 'box'){
      $('#drip')[0].play()
      return 'yellow'
    }
    if(currentClass == 'box yellow'){
      $(this).removeClass('yellow')
      $('#ding')[0].play()
      return 'blue'
    }
    if(currentClass == 'box blue'){
      $(this).removeClass('blue')
      $('#flick')[0].play()
      return 'red'
    }
    if(currentClass == 'box red'){
      $(this).removeClass('red')
      $('#drip')[0].play()
      return 'green'
    }
    if(currentClass == 'box green'){
      $(this).removeClass('green')
      $('#ding')[0].play()
      return 'white'
    }
    if(currentClass == 'box white'){
      $(this).removeClass('white')
      $('#flick')[0].play()
    }

    // ~~~~~~~~~~~~~ I would like for popupvisible to appear when ALL of the correct blocks are turned yellow or whatever color

    if ('#specialbox' == 'box yellow'){
      $("popup").addClass('popupvisible')
      // or should it be "this" instead of popup? 
  })


});
解决方案是在记录框颜色的所有框上设置一个单击事件处理程序，并在每次单击时检查该记录，以了解是否显示弹出窗口

您的代码太长，无法在此处修改，但下面是一个可使用代码实现的缩小示例：

//获取所有“单元格”的集合
var cells=document.queryselectoral（“.cell”）；
//设置一组可能的颜色
var颜色=[“红色”、“绿色”、“蓝色”、“黄色”、“橙色”、“灰色”、“浅绿色”]；
//这是哪个单元格是什么颜色的记录：
变量存储={
单元格0:“”，
第1单元：“，
第2单元：“，
第三单元：“
};
//在每个单元格上设置单击事件处理程序
Array.prototype.slice.call（cells）.forEach（函数（cell，index）{
cell.addEventListener（“单击”，函数（e）{
//将单元格颜色从颜色数组更改为随机颜色
var c=Math.floor（Math.random（）*colors.length）；
e、 target.style.backgroundColor=颜色[c]；
//存储单元和颜色：
存储器[“单元”+索引]=c；
//调试器测试
console.clear（）；
控制台日志（存储）；
//测试以确保所有单元格都设置了初始颜色
var=true；
用于（存储中的var prop）{
如果（存储[prop]==“”）{
初始化=假；
打破
}
}
//仅在每个单元格具有初始值后检查颜色匹配
//为其设置颜色（每个单元格单击一次）。
如果（已初始化）{
//检查两个相邻单元格的颜色是否相同
if（storage.cell0===storage.cell1||
storage.cell0===storage.cell2||
storage.cell1===storage.cell3||
storage.cell2===storage.cell3）{
警惕（“你赢了！”）；
}
}
});
});

.row1、.row2{显示：表行；}
.cell{
显示：表格单元格；
高度：50px；
宽度：50px；
边框：1px纯黑；
填充物：5px；
}



一个
两个
三
四

当你点击一个框时，给它一个类或一些指示它被点击/选中的东西。您需要为所有框指定一个一致的类或其他内容，以便可以循环遍历所有框并检查它们是否被选中。如果你在它们之间循环，并且它们都被选中，则显示弹出窗口。否则，把它藏起来。这是一个演示



var$box=$（'.box'）；
$（'.box'）。在（'click'，function（）上{
var allSelected=true，
$popup=$（'.popup'）；
$（this.toggleClass（'selected'）；
$box.每个（函数（）{
if（！$（this）.hasClass（'selected'））{
allSelected=false；
}
})
如果（全部选中）{
$popup.addClass（'popupvisible'）；
}否则{
$popup.removeClass（'popupvisible'）；
}
})


.box{
宽度：50px；
高度：50px；
背景：洋红；
边框：1px实心#00008B；
显示：内联块；
}
.选定{
背景：紫色；
}
.弹出窗口{
显示：无；
}
.popupvisible{
显示：块；
}




弹出窗口
您应该有一个事件，当单击框时触发（或任何事件设置颜色），该事件（而不是立即显示您的弹出窗口）执行一个功能，以检查所有框的颜色是否符合您要查找的条件。如果条件存在，则显示弹出窗口。您需要在jquery中将弹出窗口作为类引用，使用$（'.popup'）而不是$（'popup'）。只是一个提示-如果只发布与问题相关的代码，将更容易获得一些答案。@ScottMarcus
*{}
不会自动影响前后伪元素。检查一下这把小提琴，当你移开它的时候，看看它有什么不同：@SinanGuclu我站着更正。谢谢

    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

    <script src="gridtest.js" charset="utf-8"></script>



Here is my CSS: 



    html{
  height: 100%;
}

*, *::before, *::after{
  box-sizing: border-box;
}
body{
  box-sizing: border-box;
  background-color: #00008B;

}

.boxorganization{
    position: absolute;
    width: 500px;
    top: 85px;
    left: 400px;
    display: flex;
    flex-wrap: wrap;

}
.box{
    width: 50px;
    height: 50px;
    background: magenta;
    /*margin: -.5px;*/
    border: 1px solid #00008B;

}

.specialbox{
    width: 50px;
    height: 50px;
    background: magenta;
    /*margin: -.5px;*/
    border: 1px solid #00008B;

}


.popup{
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -250px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 500px;
  opacity: 0.8;
  background-color: yellow;
}

.popupvisible{
  position: absolute;
  top: 50%;
  margin-top: -250px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 500px;
  opacity: 0.8;
  background-color: yellow;
}

.congrats{
  font-family: 'Primetime';
  font-size: 50px;
  text-align: center;
  position: absolute;
  left: 25%;
  top: 35%;
  color: magenta;
  opacity: 1;

}

.next{
  font-family: 'Primetime';
  font-size: 50px;
  text-align: center;
  position: absolute;
  left: 38%;
  top: 62%;
  color: magenta;
  opacity: 1;

}



/*~~~~~~~block colors~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.yellow{
  background: yellow;

}

.blue{
  background: -webkit-linear-gradient(315deg, magenta 50%, yellow 50%);
  /*background: blue;*/
}

.red{
  background: -webkit-linear-gradient(45deg, magenta 50%, yellow 50%);
  /*background: red;*/
}

.green{
  background: -webkit-linear-gradient(135deg, magenta 50%, yellow 50%);
  /*background: green;*/
}

.white{
  background: -webkit-linear-gradient(225deg, magenta 50%, yellow 50%);
  /*background: white;*/
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



    // INDEX TITLE HOVER EFFECT

$(".title").hover(function () {
  $(".title").addClass("titlehover");}, function () {
  $(".title").removeClass("titlehover");

});


// INSTRUCTIONS HOVER EFFECT

$(".instructions").hover(function () {
  $(".instructions").addClass("instructionshover");}, function () {
  $(".instructions").removeClass("instructionshover");

});

// TITLE PAGE FADE INS

$(document).ready(function(){
    $(".title").hide(0).delay(100).fadeIn(2000)
});

$(document).ready(function(){
    $(".by").hide(0).delay(700).fadeIn(2000)
});




// PAGE 1 TITLE EFFECT

$(".text").hover(function () {
  $(".text").addClass("texthover");}, function () {
  $(".text").removeClass("texthover");

});



//  BOX SOUNDS
//
// $('.box').click(function()){
//   $(this).play('coin.mp3')
// });






//  box color

$('.box').click(function(){
  $(this).addClass(function(index,currentClass){
    console.log(currentClass)

    if(currentClass == 'box'){
      $('#drip')[0].play()
      return 'yellow'
    }
    if(currentClass == 'box yellow'){
      $(this).removeClass('yellow')
      $('#ding')[0].play()
      return 'blue'
    }
    if(currentClass == 'box blue'){
      $(this).removeClass('blue')
      $('#flick')[0].play()
      return 'red'
    }
    if(currentClass == 'box red'){
      $(this).removeClass('red')
      $('#drip')[0].play()
      return 'green'
    }
    if(currentClass == 'box green'){
      $(this).removeClass('green')
      $('#ding')[0].play()
      return 'white'
    }
    if(currentClass == 'box white'){
      $(this).removeClass('white')
      $('#flick')[0].play()
    }

    // ~~~~~~~~~~~~~ I would like for popupvisible to appear when ALL of the correct blocks are turned yellow or whatever color

    if ('#specialbox' == 'box yellow'){
      $("popup").addClass('popupvisible')
      // or should it be "this" instead of popup? 
  })


});