javascript - 我正在尝试使用 jQuery 操作页面上的特定链接

Question

我正在尝试隔离我页面上的链接并在调整页面大小时更改内容。

下面是我选择链接的方式，但我可能跑得太远了哈哈!

HTML:

<a href="uniqueLinkInfo" class="roll-button button-slider">
    <i class="fa fa-phone"></i> Call Now!
</a>

JS:

var thisContent = $('a.roll-button[href="uniqueLinkInfo"]').contents().filter(function(){
    return this.nodeType === 3;
});

我认为这不是最简单的方法。

我的目标是改变“立即调用!”同时留下“i”标签。

然后当页面返回到移动尺寸时，我将使用相同的方法将其改回。

Answer 1

我打赌制作 <span> 会更容易这就是它们的用途:

$(function () {
  setTimeout(function () {
    $('a.roll-button[href="uniqueLinkInfo"] span').text("Don't call me!");
  }, 500);
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="uniqueLinkInfo" class="roll-button button-slider">
  <i class="fa fa-phone"></i> <span class="text-content">Call Now!</span>
</a>

另外还有一种不使用JS的方式，使用CSS @media查询:

.text-content-desktop {display: inline;}
.text-content-mobile {display: none;}
@media screen and (max-width: 640px) {
  .text-content-desktop {display: none;}
  .text-content-mobile {display: inline;}
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="uniqueLinkInfo" class="roll-button button-slider">
  <i class="fa fa-phone"></i> <span class="text-content-mobile">Call Now!</span> <span class="text-content-desktop">Don't Call Now!</span>
</a>