Использование Javascript для замены углового элемента с различными элементами

Question

В настоящее время я работаю над проектом веб-сайта, который предполагает использование пары элементов из общего пакета. Элементы - это верхний и нижний колонтитулы, и у меня нет возможности изменить эти элементы, потому что другие сайты используют их.

Теперь мне нужно изменить некоторые элементы, нужно изменить текст и привязки. Единственный вариант, который у меня есть, это заменить их.

В настоящее время у меня есть следующий элемент:

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

Этот элемент происходит из общего пакета. Что мне нужно, это изменить поля email и mailto. Поскольку у них нет определенного класса, одним из решений, которое я вижу, является замена всего элемента.

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

С этим я могу заменить вышеуказанный элемент на тот, который имеет только электронную почту, но мне все еще нужен текст и номер телефона.

На самом деле я не вижу, как я могу объединить элементы для формирования исходного класса, но со всеми необходимыми элементами.

Answer 1

Вы можете выбрать <a> элементы с помощью селектора атрибутов jQuery и изменить значение 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>