1. 首页
  2. 问题列表
  3. if/else语句不能正确使用。html（）； 和字体非常棒的图标
提问者：小点点

if/else语句不能正确使用。html（）； 和字体非常棒的图标


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

状态1:（字体awesome play图标）完全观看
状态2:（字体awesome cross图标）折叠视图

下面是一个jS小提琴来展示它的工作原理（没有字体很棒的图标）:

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

下面是一个jS小提琴来显示这一点不起作用（用字体很棒的图标）:

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>

这导致初始状态1在第一次点击时改变为状态2，但随后在每次点击时保持为状态2。

我的问题是如何使用图标使if/else语句正确运行，这是否与使用<； i>； inside.html（）；？


共1个答案

匿名用户

这应该能解决你的问题。

null

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>

相关问题