Question

我设法在另一个项目的页面加载中打开了其中一件令人讨厌的小东西，但是在这个项目中，当我单击“帮助”链接时，不会加载模式。

这是我html文件中最重要的代码：

<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Bomb Defuser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id = "timeContainer">
  <span id = "time" style="font-size: 50px">02:00</span>
</div>
<div id = "bomb">
  <img src = "images/bomb.png" alt="bomb"></img>
  <a href = "#" style= "float:right;" onclick = "loadModal();">Help?</a>

  <div id="myModal" class="modal hide fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

这是应该使模式出现在我的js文件中的代码：

function loadModal(){
  $('#myModal').removeClass("hide").modal('show');
}

编辑＃2：我将代码缩减为我认为必不可少的部分，因为此站点告诉我要这样做，但是由于找不到人的问题，这里是完整的HTML文件和完整的JS文件：

    <!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>Bomb Defuser</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">




<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>





<div id = "timeContainer"> <span id = "time" style="font-size: 50px">02:00</span> </div>



<div id = "bomb">

<img src = "images/bomb.png" alt="bomb"></img>
<a href = "#" style= "float:right;" onclick = "loadModal();">Help?</a>

<div id="myModal" class="modal hide fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<br>
<br>
<br>

<button style= "color:red;" id = "1" onClick = "cut(this.id)">Cut the red wire</button> <button style = "color: blue" id = "2" onClick = "cut(this.id)">Cut the blue wire</button> <button style="color:green;" id = "3" onClick = "cut(this.id)">Cut the green wire</button>
<br>
<br>
<span id = "hint">(Check console for hint)</span>

<p><a href ="#" onclick = "startBeep()"> Try again?</a></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src = "bomb.js" type = "text/javascript"></script>

</body>
</html>

这是JS文件：

function loadModal(){
        $('#myModal').removeClass("hide").modal('show');
    }

    // $("#bomb").hide();


    // var randomRoom = Math.floor(Math.random() * 5) + 1;

    var alreadyWon = false;

    var boom = new Audio("boom.mp3");

    var applause = new Audio("victory.wav");

    var beep = new Audio("beep1.wav");

    var shouldBeep = true;

    function stopBeep(){
        shouldBeep = false;
    }

    function startBeep(){
        shouldBeep = true;
    }

    boom.volume = 0.4;
    applause.volume = 0.4;

    var randomWire = Math.floor(Math.random() * 3) + 1;

    console.log(randomWire);

    var counter = 120;



    //okay, so how do I do this?  I assign a number value to each button
    //then if random = value of button just pressed, this.id or this.value or whatever,
    //trigger a victory

    function detonate(){
        stopBeep();
      //change image src to explosion, alt to explosion, and change size?
      $("img").hide();


      $("body").css("background", "url('images/explosion.png') no-repeat center center fixed");
      $("body").css("-webkit-background-size", "cover");
      $("body").css("-moz-background-size", "cover");
      $("body").css("-o-background-size", "cover");
      $("body").css("background-size", "cover");

  //     $("body").attr({
  //       "background" : "url('images/explosion.png') no-repeat center center fixed",
  //       "-webkit-background-size" : "cover",
  // "-moz-background-size" : "cover",
  // "-o-background-size" : "cover",
  // "background-size" : "cover"
  //     });


      //hide cut wire buttons
      $("button").hide();
      $("#time").hide();
      $("#timeContainer").hide();
      $("#hint").hide();

      $("p").delay(2500).fadeIn();
      boom.play();
    }

    function victory() {
        stopBeep();
      $("img").hide();

        $("body").css("background", "url('images/victory.png') no-repeat center center fixed");
      $("body").css("-webkit-background-size", "cover");
      $("body").css("-moz-background-size", "cover");
      $("body").css("-o-background-size", "cover");
      $("body").css("background-size", "cover");

  //      $("body").attr({
  //       "background" : "url('images/victory.png') no-repeat center center fixed",
  //       "-webkit-background-size" : "cover",
  // "-moz-background-size" : "cover",
  // "-o-background-size" : "cover",
  // "background-size" : "cover"
  //     });

      //hide cut wire buttons
      $("button").hide();
      $("#time").hide();
      $("#timeContainer").hide();
      $("#hint").hide();


      $("p").delay(2500).fadeIn();



      alreadyWon = true;
      applause.play();
}

$("p").click(function(){
     location.reload();
});

    setTimeout(bombTimer, 1000 * 120);
    setTimeout(time, 1000 * 1);

    function timeConverter(t){
      var minutes = Math.floor(t / 60);
    var seconds = t - (minutes * 60);

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

    if (minutes === 0) {
      minutes = "00";
    }
    else if (minutes < 10) {
      minutes = "0" + minutes;
    }

    return minutes + ":" + seconds;
    }

    function time(){
      counter--;

      if (shouldBeep === true)
        {
            beep.play();
        }


      counterConverted = timeConverter(counter);
      $("#time").text(counterConverted);
       setTimeout(time, 1000 * 1);
    }

    function bombTimer() {
      if (alreadyWon == false)
      {
      alert("Time's up!  Uh-oh!")

  detonate();
}

}




    function cut(buttonId){
      if (buttonId == randomWire)
      {
        alert("Great job!");
        victory();
      }
      else
      {
        alert("Wrong wire!  Uh oh!");
        console.log(buttonId);
        //WHY DOES THIS SHOW UP AS UNDEFINED!?
        detonate();
      }



    }

Answer 1

您提供的代码似乎工作正常。我只删除了与代码段无关的内容。您的代码中肯定还有其他东西会影响模式。

function loadModal() {
  $('#myModal').removeClass("hide").modal('show');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="timeContainer">
  <span id="time" style="font-size: 50px">02:00</span>
</div>

<div id="bomb">
  <img src="images/bomb.png" alt="bomb" />
  <a href="#" style="float:right;" onclick="loadModal();">Help?</a>

  <div id="myModal" class="modal hide fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 2

尝试摆脱loadModal函数并使用：

public void method(List<Map<String, String>> list)
{
  List<Map<String, Object>> expectedList = new ArrayList<>();

    for (Map<String, String> entry : list)
    {
        // assume replaceValues(entry) does some logic and returns an updated map
        Map<String, Object> updatedMap = replaceValues(entry);
        expectedList.add(updatedMap);
    }
}

可能需要从模态中删除“隐藏”类。

链接无法打开Bootstrap模式

2 个答案: