多功能 jQuery onClick 调用脚本

Question

经过大量的研究和测试，我拼凑了几个片段，几乎达到了 100%，这要归功于多篇 Stack 文章（例如如何单击显示和单击调用？ ）。

给定多个容器，如图所示：

 <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. 用 href tel 标签包裹 p.phone 字段；
3. 将 p.phone 内容替换为“点击通话”；
4. 单击时，如果存在逗号和扩展名，则显示格式为 # + 分机（例如 888-555-1212 分机 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>

我为最后一块写了另一个 function （将点击更改为点击调用），但是

1. 它没有用
2. 单击时它会更改 .phone 的所有实例。

Answer 1

我认为您在点击时替换了 all.phone，因为您使用了全局选择器。 尝试将事件绑定到每个链接，或者您可以使用实时监听器 on.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') ));
});

Answer 2

我对“点击通话”和“实际电话号码”之间的预期切换有点困惑。 请让我知道它是否符合目的或需要更多更改

 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>