If/else 语句无法与 .html() 一起正常工作；和超棒的图标

Question

我有一个视频内容横幅，其文本叠加层具有 2 种状态：

状态1：（字体真棒播放图标）完整观看
状态 2：（字体很棒的十字图标）折叠视图

这是一个 jS fiddle 来展示这个工作（没有字体真棒图标）：

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

这是一个 jS fiddle 来显示这个不工作（带有很棒的字体图标）：

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

我遇到的问题是文本在此示例中正确切换，但是当我在我的网站上加载图标时，它总是运行s 来自下面 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>

这导致最初的 状态 1 在第一次点击时被更改为 状态 2，但随后保持为 此后每次点击时状态 2。

我的问题是如何使用图标将我的 if/else 语句正确地设置为运行，这是否与在 .html(); 中使用 < i > 有关？ =15=]

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>

If/else 语句无法与 .html() 一起正常工作；和超棒的图标

If/else statement not working correctly with .html(); and font-awesome icons

jquery

icons

font-awesome