多功能 jQuery onClick 调用脚本

Question

经过大量的研究和测试，我拼凑了几个片段以达到几乎 100% 的效果，这要归功于多篇 Stack 文章（例如如何单击以显示和单击以调用？）。给定多个容器，如图所示：<div class="entry-details">    <p class="phone">[phone],,,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">[phone],,,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">[phone],,,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">[phone]</p>    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>    <p class="time">11:00 to 08:00</p></div>onClick 的目标是：将 p.phone 字段文本复制到 href；用 href tel 标签包裹 p.phone 字段；将 p.phone 内容替换为“点击通话”；单击时，如果存在逗号和扩展名，则显示格式为 # + ext（例如 888-555-1212 Ext 222）的数字，否则显示标准电话（例如 888-555-1212）。最后，拨打 # 包括停顿（逗号）；我为最后一段编写了另一个函数（更改 Click to Call on click），但是它没有用单击时，它更改了 .phone 的所有实例。

Answer 1

我认为您已经在单击时替换了所有 .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') ));

});

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">[phone],,,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">[phone],,,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">[phone],,,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">[phone]</p>

    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>

    <p class="time">11:00 to 08:00</p>

</div>