Question

我有一个很好的CSS生成卡列表。它们包含图标和文本，并且一旦点击它们就可以展开一个很好的动画，以显示更多图标和选项。我对列表进行了硬编码，并使其看起来和行为完全符合我的要求。

现在，我在数据库上有一些JSON数据，我想使用该数据动态填充列表。

问题：除了由jQuery toggleClass（）不再适用的CSS动画外，它的效果很好。

我该如何解决这个问题？这是我的代码。

HTML ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
    <link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/customFitFunctions.js"></script>
  </head>
  <body>

    <!--APPEND CARDS-->
    <ul id="cardList" class="cards">

    </ul>
  </body>
</html>

的JavaScript ：

    // Sync with Firebase in real time.
    dbRef.on("value", snap =>
    {
      var workouts = snap.val();

      for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
      {
        $("#cardList").append("<li><div class='card transform'>\n\
        <div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>\n\
        <img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>\n\
        <img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />\n\
        <img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>\n\
        <img src='images/tenMinutes.png' width='66' alt='' /></div></div>\n\
        <div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>\n\
        <img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>\n\
        </div><div class='deleteIt'><a class='deleteButton' href='#'>\n\
        <img src='images/thrashButtonUp.png' width='60' alt='' />\n\
        <img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>\n\
        <a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>\n\
        <img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
      }
    });

jQuery的：

  // Triggers CSS animation for cards.
  $(".card").click(function()
  {
    $(this).toggleClass("transformActive");
    $(".disappear", this).toggleClass("appear");
  });

CSS：

/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
  position: absolute;
  width: 100%;
  top: 60px;
  list-style: none;
  text-decoration: none;
  text-align: center;
  z-index: -1;
}

.cards li
{
  position: relative;
  width: 100%;
  padding-bottom: 10px;
}

.card
{
  position: relative;
  background-color: #ffffff;
  height: 150px;
  width: 100%;
  left: -6%;
  border-radius: 8px;
  box-shadow: 2px 2px 2px #686868;
}

.transform
{
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.transformActive
{
  background-color: #ffffff;
  height: 260px;
  width: 100%;
  box-shadow: 6px 6px 6px #888888;
}

/* CARD CONTENT SECTION */
.cardInfo
{
  position: relative;
  margin: auto;
  width: 95%;
  height: 130px;
  text-align: left;
}

.cardInfo h3
{
  position: relative;
  top: 5px;
}

.cardInfo p
{
  position: relative;
  color: black;
  text-align: right;
  top: -40px;
}

.startIt
{
  position: absolute;
  bottom: 0px;
}

.timeIcon
{
  position: absolute;
  bottom: 0px;
  left: 78%;
}

.infoIcons
{
  position: relative;
  margin: auto;
  top: -20px;
  width: 52%;
  height: 100px;
}

.infoIcons img
{
  margin-left: 6px;
}

#holder
{
  position: relative;
  width: 100%;
  height: 80px;
}

/* CARD ANIMATION */
.disappear
{
  position: relative;
  width: 95%;
  height: 40%;
  top: 8%;
  margin: auto;
  opacity: 0;
}

.appear
{
  -webkit-animation: appearFade 1.2s ease forwards;
  -moz-animation: appearFade 1.2s ease forwards;
  -o-animation: appearFade 1.2s ease forwards;
  -ms-animation: appearFade 1.2s ease forwards;
  animation: appearFade 1.2s ease forwards;
}

@keyframes appearFade
{
  0%
  {
    opacity: 0;
  }
  100%
  {
    opacity: 1;
  }
}

/* CARD OPTIONS ICONS */
.playIt
{
  position: absolute;
  left: 0px;
}

.playButton img:last-child
{
  display: none;
}

.playButton:hover img:first-child
{
  display: none;
}

.playButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 3px;
  top: 3px;
}

.deleteIt
{
  position: relative;
  margin: auto;
  top: 25px;
}

.deleteButton img:last-child
{
  display: none;
}

.deleteButton:hover img:first-child
{
  display: none;
}

.deleteButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 2px;
  top: 2px;
}

.modifyIt
{
  position: absolute;
  right: 0px;
  top: 0px;
}

.modifyButton img:last-child
{
  display: none;
}

.modifyButton:hover img:first-child
{
  display: none;
}

.modifyButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 0px;
  top: 3px;
}

Answer 1

问题是您在添加元素之前添加了单击处理程序，因此只有初始元素才会在其上添加单击事件。相反，您可以将点击处理程序添加到body但过滤它。

$('body').on('click', '.card', function(){ ... }

这样点击事件就在整个文件上，但除非您点击了一张卡，否则该功能不会触发。

Answer 2

所以，我怀疑问题不是toggleClass，而是click处理程序。要使jQuery作用于DOM元素，该元素必须在站点完成初始加载时存在。

如果使用JSON加载后填充内容，则无法对内容所在的DOM元素进行操作。

所有的初始类都被添加到JSON内容中 - 所以它们在加载时都不存在 - jQuery对它们的存在一无所知。

您的点击目标必须在加载时出现才能解决您的问题。所以，不要把DOM元素放在你的JSON中。已经填充它们，并将JSON数据提供给现有元素。或者 - 将您的点击事件绑定到加载时存在的更高的DOM元素。然后动态元素将能够冒泡，jQuery将有一些值得关注的东西

Answer 3

由于在您的点击监听器附加后添加了.card项，因此无法正常工作。绑定侦听器时，元素需要存在。您应该使用delegated events。

将点击侦听器附加到您的容器元素，然后使用event.target作为您点击的元素：

$('#cardList').on('click', '.card', (event) => {
  // $(event.target) is the element you clicked
  $(event.target).toggleClass('transformActive');
});

jQuery toggleClass（）方法不适用于JSON生成的内容

3 个答案: