Многофункциональный jQuery onClick to Call Script

Question

Проведя много исследований и тестирований, я собрал несколько фрагментов, чтобы получить почти 100%, благодаря нескольким статьям стека (например, Как щелкнуть, чтобы показать, и Нажать, чтобы позвонить? ).

Учитывая несколько контейнеров, как показано:

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

Цель onClick:

1. Копировать текст поля p.phone в href;
2. Обернуть поле p.phoneс тегом href tel;
3. Заменить содержимое p.phone на «Click to Call»;
4. При нажатии показать номер в формате # + ext (например, 888-555-1212 Ext 222)если присутствуют запятая и добавочный номер, в противном случае используйте стандартный телефон (например, 888-555-1212).
5. и, наконец, наберите #, включая паузы (запятые);

jQuery(document).ready(function($) {
        $('.phone').wrapInner('<a class="phone-link" href=""></a>');
        $('.phone').each(function() {
            var $phoneLink = $(this).find('.phone-link');
            var _linkUrl = $phoneLink.text();
            $(this).find('a.phone-link').attr('href', 'tel:' + _linkUrl).text('Click to Call');
        });

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

Я написал еще одну функцию для финальной части (меняя Click to Call на click), но

1. Не сделалработа
2. Он изменил все экземпляры .phone при нажатии.

Answer 1

Я был немного озадачен предполагаемым переключением между «Click to Call» и «фактическим номером телефона». Пожалуйста, дайте мне знать, если это служит цели или нуждается в дополнительных изменениях

jQuery(document).ready(function($) {
        $(".phone").on("click",function(event){
          if(!$(event.target).hasClass("phone-link") ){
            var phoneLink = $(this).text();
            $(this).wrapInner('<a class="phone-link" href=""></a>');
            $(this).find("a.phone-link").attr('href','tel:' + phoneLink).text('Click to Call');
          }
        
        });
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

Answer 2

Я думаю, что вы заменили все .phone при нажатии, потому что вы использовали глобальный селектор. Попробуйте связать событие с каждой ссылкой, или вы можете использовать живой слушатель на селекторе .phone-link.

jQuery(function($) {

  var formatPhone = function(tel) {
    // format should be here
    return tel;
  }

  // replace in a single loop
  // without wrapping
  $('.phone').each(function() {
    var $this = $(this);
    var tel = $this.text();
    var $link = $('<a class="phone-link" href="tel:'+tel+'">Click to Call</a>')
      .on('click', function(ev) {
        ev.preventDefault();
        $(this).text(formatPhone(tel));
      });

    $this.empty().append($link);
  });
});

семпл с живым слушателем

$(document).on('click', '.phone-link', function(ev) {
    ev.preventDefault();
    var $this = $(this);
    $this.text(formatPhone( $this.attr('href') ));
});