代码之家 › 专栏 › 技术社区 › Cláudio Ribeiro

使用javascript用不同的元素替换一个角度分区

angularjs jquery javascript

Cláudio Ribeiro · 技术社区 · 6 年前

我目前正在开发一个网站项目,该项目涉及使用一个公共包中的两个元素。这些元素是页眉和页脚,我不能更改这些元素,因为其他网站正在使用它们。

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

我目前有以下元素:

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

这个元素来自公共包。我需要更改电子邮件和mailto字段。因为它们没有特定的类,所以我看到的解决方案之一是替换整个元素。

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

通过这个,我可以用只有电子邮件的元素替换上面的元素,但是我仍然需要文本和电话号码。

我真的不知道如何连接元素以形成原始类,而是使用所有需要的元素。

1 回复 | 直到 6 年前

Vinicius.Silva 6 年前

你可以选择 <a> 带有jquery的元素 attribute selector 并将de值更改为 .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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前