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;
});

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

我的目标是改变＆＃34;立即致电！＆＃34;离开＆＃34; i＆＃34;标签

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

Answer 1

我敢打赌，制作一个<span>更容易，这就是它们的用途：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

Answer 2

如果您只想替换 last textNode并且已经有jQuery可用，则可以使用正则表达式进行替换。

var $link = $('a.roll-button[href="uniqueLinkInfo"]');
var newHtml = $link.html().replace(/([^>])+$/m, " Replaced!");
$link.html( newHtml );

<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">[phone icon]</i> Call Now!
</a>

我试图用jQuery

2 个答案: