javascript - 在变量中的javascript中添加弹出窗口

Question

有一个脚本，其中每个插槽都有一个唯一的单词。这些都在同一个变量（单词）中。我的困境是，当我单击单词观看电影时，我必须弹出一个弹出窗口，不同的电影对应不同的单词。是否可以将其添加到变量中以及如何添加？

https://jsfiddle.net/ajo81t2y/

$(document).ready(function() {

  var words = ["tomte","ipsum ", "delor", "sit", "amet", "consect", "adipisci", "elit,", "sed.", "Eiusmod", "tempor", "a", "enim", "minim", "season", "nulla", "dolore", "sint", "id", "est", "laboris", "ut.", "aute", "laborum", "toe"];

  var message = "";
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var scrolled = false;
  var timeDelay = 200;

  // function to reveal message
  var cardReveal = function() {
    $("#message").text(message).show();
  }

  //day=25; // uncomment to skip to 25

  // Only work in December
  if (month === 12) {
    // Loop through each calendar window
    $("li").each(function(index) {
      var adventwindow = index + 1;
      var item = $(this);



      // Open past windows
      if (day !== adventwindow && adventwindow < day) {
        window.setTimeout(function() {
          item.children(".door").addClass("open");
        }, timeDelay);
      }

      // timeout offset for past window opening animation
      timeDelay += 100;

      // Add words so far to message variable
      if (adventwindow <= day) {
        var word = words[index];
        $(this).append('<div class="revealed">' + word + '</div>');
        message = message + " " + word;
      }

      // Add jiggle animation to current day window
      if (adventwindow === day) {
        $(this).addClass("current");
        $(this).addClass("jiggle");
      }

      // On clicking a window, toggle it open/closed and
      // handle other things such as removing jiggle and 25th
      $(this).on("click", function() {
        if (adventwindow <= day) {
          $(this).children(".door").toggleClass("open");
        }

        $(this).removeClass("jiggle");

        // If 25th, can show the message
        if (day >= 25 && adventwindow === 25) {
          messageReveal();

          // Animate scroll to message if not already done
          if (!scrolled) {
            $('html, body').animate({
              scrollTop: $("#message").offset().top
            }, 2000);
            scrolled = true;
          }
        }
      });

    });

    // If beyond 24, show message
    if (day >= 26) {
      messageReveal();
    }

  }

});

@import url(https://fonts.googleapis.com/css?family=Oleo+Script);
body {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg");
  color: #fff;
  font-family: 'Oleo Script', cursive;
  padding: 20px;
  font-weight: 400;
}

h1 {
  margin: 0;
  font-size: 75px;
  line-height: 75px;
  text-align: center;
  font-weight: 400;
}

ul {
  margin: 0 auto 30px auto;
  padding: 0;
  list-style-type: none;
  max-width: 900px;
  width: 100%;
  text-align: center;
  user-select: none;
}

li {
  font-weight: 400;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  display: inline-block;
  color: #111;
  cursor: pointer;
  font-size: 26px;
  padding: 15px;
  margin: 25px 12px;
  width: 130px;
  height: 130px;
  line-height: 100px;
  text-align: center;
  position: relative;
  vertical-align: top;
  user-select: none;
  perspective: 800px;
  transition: all 0.4s ease-in-out;
}

ul li:last-child {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/santa.jpg") center top;
  background-size: cover;
  display: block;
  clear: both;
  margin: 20px auto 0 auto;
  width: 200px;
  height: 275px;
}

ul li:last-child .door {
  font-size: 100px;
  width: 200px;
  height: 275px;
  line-height: 240px;
}

ul li:last-child .revealed {
  line-height: 123px;
}

.door {
  user-select: none;
  color: #fff;
  font-size: 70px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #91c1cc;
  box-sizing: border-box;
  border-top: 2px #eee dashed;
  border-right: 2px #eee dashed;
  border-bottom: 2px #eee dashed;
  border-left: 1px #eee solid;
  border-radius: 6px;
  padding: 15px;
  width: 130px;
  height: 130px;
  transform-origin: 0 40%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.current .door {
  background-color: #7EAD44;
}

.current .door.open {
  color: #7EAD44;
}

.revealed {
  user-select: none;
}

#message {
  box-sizing: border-box;
  color: #222;
  display: none;
  font-size: 24px;
  padding: 20px;
  background: #eddecb;
  max-width: 500px;
  width: 100%;
  border-radius: 15px;
  margin: 0 auto;
}

.open {
  box-shadow: 14px 0px 15px -1px rgba(0, 0, 0, 0.2);
  color: #91c1cc;
  transform: rotate3d(0, 1, 0, -98deg);
}

.jiggle {
  animation: jiggle 0.2s infinite;
  transform: rotate(-1deg);
}

@keyframes jiggle {
  0% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

@media screen and (min-width: 480px) {
  li {
    margin: 25px 20px;
  }
}

@media screen and (min-width: 768px) {
  body {
    background-size: 150px;
  }
  p {
    right: 6%;
    top: 20%;
    bottom: auto;
    margin-left: auto;
    left: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<h1>Merry Christmas</h1>
<ul>
  <li>
    <div class="door">1</div>
  </li>
  <li>
    <div class="door">2</div>
  </li>
  <li>
    <div class="door">3</div>
  </li>
  <li>
    <div class="door">4</div>
  </li>
  <li>
    <div class="door">5</div>
  </li>
  <li>
    <div class="door">6</div>
  </li>
  <li>
    <div class="door">7</div>
  </li>
  <li>
    <div class="door">8</div>
  </li>
  <li>
    <div class="door">9</div>
  </li>
  <li>
    <div class="door">10</div>
  </li>
  <li>
    <div class="door">11</div>
  </li>
  <li>
    <div class="door">12</div>
  </li>
  <li>
    <div class="door">13</div>
  </li>
  <li>
    <div class="door">14</div>
  </li>
  <li>
    <div class="door">15</div>
  </li>
  <li>
    <div class="door">16</div>
  </li>
  <li>
    <div class="door">17</div>
  </li>
  <li>
    <div class="door">18</div>
  </li>
  <li>
    <div class="door">19</div>
  </li>
  <li>
    <div class="door">20</div>
  </li>
  <li>
    <div class="door">21</div>
  </li>
  <li>
    <div class="door">22</div>
  </li>
  <li>
    <div class="door">23</div>
  </li>
  <li>
    <div class="door">24</div>
  </li>
</ul>

<p id="message"></p>

标签： javascripthtmlcss

Answer 1

https://jsfiddle.net/mplungjan/3ycxume5/

  $(this).on("click", function() {
    if(adventwindow <= day) { 
      $(this).children(".door").toggleClass("open");
      const word = $(this).find(".revealed").text();
      // console.log("opening",word,urls[word])
      window.open(urls[word]); 
    }

你在哪里

urls =  { "tomte":"https://www.site1.com/", "ipsum":"https://www.site2.com/" ... }