javascript - 仅隐藏 anchor 标记的内容并在媒体查询上添加类

Question

我在 anchor 标签中有一个文本，上面写着添加到购物车，但在移动 View 中我想将其更改为 fa fa-cart 移动 View

  <a class="product"><?php echo $button_add_to_cart ?></a>

现在这个 $button_add_to_cart 有文本添加到购物车和购物车 (fa fa-cart)。在移动 View 上我想要

在移动 View 上我只想要一个购物车

CSS:

.thumbnail a.product{
background: #00A1CB;
color: #fff;
float: right;
padding: 5px;
font-size: 13px;
text-transform: uppercase;
position: relative;
}
.thumbnail a.product:before {
    position: absolute;
    font-family: FontAwesome;
    font-size: 16px;
    content: "\f07a";
    top: 5px;
    right: 8px;
}

我尝试将文本替换为:

@media only screen and (max-width: 479px) {
.thumbnail a.product{
content:"\f07a";
}}

它不工作

Answer 1

解决方案1:

<a class="product desktop-screen"><?php echo $button_add_to_cart ?></a>
<a class="product mobile-screen"><?php echo $cart ?></a>

CSS:

desktop-screen{display:block;}
mobile-screen{display:none;}

@media only screen and (max-width: 479px) {
        desktop-screen{display:none;}
        mobile-screen{display:block}
    }
}

解决方案2:使用 jQuery

<a class="product"><?php echo $button_add_to_cart ?></a>

<script>
$(window).on('resize', function(){
      var win = $(this);
      var a_tag_text = "add to cart";
      var icon = "<i class="fa fa-cart"></i>"
      if (win.width() <= 479) {
          $(".product").html(icon);
      }else{
          $(".product").html(a_tag_text + icon);
      }
});
</script>