javascript - 使用 Javascript 用不同的元素替换 Angular div

Question

我目前正在开发一个网站项目，该项目涉及使用公共(public)包中的几个元素。这些元素是页眉和页脚，我无法更改这些元素，因为其他网站正在使用它们。

现在我需要更改一些元素，一些文本和 anchor 需要更改。我唯一的选择就是更换它们。

我目前有以下元素:

<div class="visible-element">
<p style="display: inline-block;" class="ng-binding">Need a hand?</p>
<a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>
<span>|</span>
<a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>
</div>

该元素来自公共(public)包。我需要的是更改电子邮件和邮寄地址字段。由于它们没有特定的类，我看到的解决方案之一是替换整个元素。

// replace contents
var email = "mailto:yolo@mymail.com"
$(".visible-element").html(
    $("<a>").attr("href", "mailto:" + email).text(email)
);

这样，我可以将上述元素替换为仅包含电子邮件的元素，但我仍然需要文本和电话号码。

我并没有真正了解如何将元素连接起来形成原始类，但又包含所需的所有元素。

Answer 1

您可以选择<a>使用 jQuery 的元素 attribute selector并用 .text() 更改值方法。更改段落文本<p>您可以选择它们并再次使用 .text()方法。

请注意，如果您有多个位置需要更改，您可以创建一个函数来执行此操作以避免代码重复。

(function ( $ ) {
  $( '.visible-element' )
    .find( 'p' )
    .text( 'My new other text here' );

  $( '[href="tel:(+351) 217 907 610"]' )
    .attr( 'href', 'tel:(+999) 999 999 999' )
    .text( '(+999) 999 999 999' );
    
  $( '[href="mailto:yolo@mymail.com"]' )
    .attr( 'href', 'mailto:me@myself.com' )
    .text( 'me@myself.com' );
} ( jQuery ));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visible-element">
   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>
   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>
   <span>|</span>
   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>
</div>