If/ not语句不能正确使用.html()；和字体-令人敬畏的图标

Question

我有一个视频内容横幅，它有一个文本覆盖，有两个状态：

状态1: (字体酷玩图标)全天候观看

状态2: (字体令人敬畏的交叉图标)崩溃视图

这里是一个jS小提琴来显示这个工作(没有字体可怕的图标)：

https://jsfiddle.net/vanstone/4xmabz1f/3/

这里是一个jS小提琴，用来显示 not 工作(字体很棒的图标)：

https://jsfiddle.net/vanstone/4xmabz1f/4/

我遇到的问题是，在本例中文本切换正确，但是当我加载站点上的图标时，它总是从下面的jS运行else语句：

<script>
jQuery("#videoWrapper").click(function() {

   var videoText = jQuery(".watch-full-tag p").html();

   if (videoText === '<i class="fas fa-times-circle"></i> Collapse View') {
      jQuery(".watch-full-tag p").html('<i class="fas fa-play-circle"></i> Watch In Full');
// it runs the below on every click event
   } else {
      jQuery(".watch-full-tag p").html('<i class="fas fa-times-circle"></i> Collapse View');
   }

});
</script>

这将导致最初的State 1在第一次单击时更改为State 2，但在此后的每次单击中保持为State 2。

我的问题是如何使用图标使if/ get语句正确运行，这与在.html()中使用有关吗？

Answer 1

这应该能解决你的问题。

​

function removeCursor() {
  setTimeout(function(){
    jQuery(".typed-cursor").remove();
  }, 2650);
}

removeCursor();


jQuery("#videoWrapper").click(function(e) {
     e.preventDefault();
      if(jQuery("#videoWrapper").hasClass("full")) {
         jQuery("#videoWrapper").animate({"height": "400px"}).removeClass("full");
        jQuery(".site-header, .site-header--sticky-spacer").slideDown("100");
      } else {
        jQuery("#videoWrapper").animate({"height": "92vh"}).addClass("full");
        jQuery(".site-header, .site-header--sticky-spacer").slideUp("100");
      }
   });

jQuery("#videoWrapper").click(function() {

   var videoText = jQuery(".watch-full-tag p").html();

   if (jQuery(".watch-full-tag p > i").hasClass('fa-times-circle')) {
      jQuery(".watch-full-tag p").html('<i class="fas fa-play-circle"></i> Watch In Full');

   } else {
      jQuery(".watch-full-tag p").html('<i class="fas fa-times-circle"></i> Collapse View');
   }

});

/* VIDEO CSS */
video {
    width: 100%;
    height: auto;
}

#videoWrapper {
    width: 100%;
    height: 400px;
    display: block;
    background-color: #000000;
}

#videoWrapper.full {
    display: block!important;
    height: 92vh;
}

.watch-full-tag p {
    position: absolute;
    bottom: 30px;
    display: block;
    background: transparent;
    left: 45px;
    color: #bdbdbd;
    font-size: 13px;
    font-family: Helvetica, Arial;
    opacity: 0.3;
    transition: 0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
}

#videoWrapper:hover .watch-full-tag p {
    opacity: 1;
    transition: 0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
}

@media screen and (max-width: 768px) {
    #videoWrapper {
    height: auto;
    }
}
/* END VIDEO CSS */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<div id="videoWrapper">
<div class="watch-full-tag"><p><i class="fas fa-play-circle"></i> Watch In Full</p></div>
<video width="400" autoplay loop muted playsinline poster="https://element.vanst.one/wp-content/uploads/2020/06/Element_Video_Extract_001-scaled.jpg">
  <source src="https://element.vanst.one/wp-content/uploads/2020/06/ELEMENT-LTD-Vid_001_OPT.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

​