Javascript 仅隐藏锚定标记的内容，并在媒体查询中添加类

我在锚定标签中有一条文字，上面写着“添加到购物车”，但在“移动视图”中，我想将其更改为“购物车移动视图”

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

我尝试将文本替换为：

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

---

它不起作用

您只需添加一个或另一个购物车按钮……而且它的样式没有给出任何提示

像。。。 '此处放置fa购物车图标'

之后

@media only screen and (max-width: 479px) {

  .thumbnail a.product {
    display:none;
  }

  #cart {
    display:show;
  }
}}

---

我添加了

span

并删除了伪元素上的位置，还添加了

内容中的文本。它对我有用


。缩略图一种产品{
背景：#00A1CB；
颜色：#fff；
浮动：对；
填充物：5px；
字体大小：13px；
文本转换：大写；
位置：相对位置；
}
.缩略图a.产品范围：之前{
字体系列：Fontsome；
字体大小：16px；
内容：“添加到购物车\f07a”；
}
@仅介质屏幕和（最大宽度：479px）{
.缩略图a.产品范围：之前{
字体系列：Fontsome；
字体大小：16px；
内容：“\f07a”；
}
}
解决方案1:

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

解决方案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>


$（窗口）.on（'resize'，function（））{
var win=$（此）；
var a_tag_text=“添加到购物车”；
var icon=“”
如果（win.width（）清除内容值
content:；
但我需要显示cartAh:）将文本包装到span元素中，并将其隐藏在移动视图
.缩略图a.product span{display:none}
我无法包装整个文本，因为我想在购物车图标上单击锚定标记。我不明白。如果您的html想要
您的文本
，那会有什么问题？图标会一直保留，因为它附加到
：在链接之前
是否有任何地方可以隐藏锚定标记的内容..我是说隐藏文本“添加到购物车”关于媒体查询？@raulxbox和jquey您可以很容易地做到这一点，我正在更新解决方案2以了解如何解决问题！它解决问题了吗？我添加了span tag@media，我确实显示了：txt购物车没有
desktop-screen{display:block;}
mobile-screen{display:none;}

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

<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>