多功能 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 的目标是：

1. 将 p.phone 字段文本复制到 href；

2. 用 href tel 标签包裹 p.phone 字段；

3. 将 p.phone 内容替换为“点击通话”；

4. 单击时，如果存在逗号和扩展名，则显示格式为 # + ext（例如 888-555-1212 Ext 222）的数字，否则显示标准电话（例如 888-555-1212）。

5. 最后，拨打 # 包括停顿（逗号）；

我为最后一段编写了另一个函数（更改 Click to Call on click），但是

1. 它没有用

2. 单击时，它更改了 .phone 的所有实例。

Answer 1

我认为您已经在单击时替换了所有 .phone，因为您使用了全局选择器。尝试将事件绑定到每个链接，或者您可以在 .phone-link 选择器上使用实时侦听器。jQuery(function($) {&nbsp; var formatPhone = function(tel) {&nbsp; &nbsp; // format should be here&nbsp; &nbsp; return tel;&nbsp; }&nbsp; // replace in a single loop&nbsp; // without wrapping&nbsp; $('.phone').each(function() {&nbsp; &nbsp; var $this = $(this);&nbsp; &nbsp; var tel = $this.text();&nbsp; &nbsp; var $link = $('<a class="phone-link" href="tel:'+tel+'">Click to Call</a>')&nbsp; &nbsp; &nbsp; .on('click', function(ev) {&nbsp; &nbsp; &nbsp; &nbsp; ev.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; $(this).text(formatPhone(tel));&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; $this.empty().append($link);&nbsp; });});带有现场听众的示例$(document).on('click', '.phone-link', function(ev) {&nbsp; &nbsp; ev.preventDefault();&nbsp; &nbsp; var $this = $(this);&nbsp; &nbsp; $this.text(formatPhone( $this.attr('href') ));});

Answer 2

我对“点击通话”和“实际电话号码”之间的预期切换感到有些困惑。请让我知道它是否符合目的或需要更多更改jQuery(document).ready(function($) {&nbsp; &nbsp; &nbsp; &nbsp; $(".phone").on("click",function(event){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!$(event.target).hasClass("phone-link") ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var phoneLink = $(this).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).wrapInner('<a class="phone-link" href=""></a>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find("a.phone-link").attr('href','tel:' + phoneLink).text('Click to Call');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });});&nbsp;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="entry-details">&nbsp; &nbsp; <p class="phone">[phone],,,111</p>&nbsp; &nbsp; <p class="address">111 Any Street, Anytown, NY 10010, USA</p>&nbsp; &nbsp; <p class="time">11:00 to 08:00</p></div><div class="entry-details">&nbsp; &nbsp; <p class="phone">[phone],,,222</p>&nbsp; &nbsp; <p class="address">222 Any Street, Anytown, NY 10010, USA</p>&nbsp; &nbsp; <p class="time">11:00 to 08:00</p></div><div class="entry-details">&nbsp; &nbsp; <p class="phone">[phone],,,333</p>&nbsp; &nbsp; <p class="address">333 Any Street, Anytown, NY 10010, USA</p>&nbsp; &nbsp; <p class="time">11:00 to 08:00</p></div><div class="entry-details">&nbsp; &nbsp; <p class="phone">[phone]</p>&nbsp; &nbsp; <p class="address">444 Any Street, Anytown, NY 10010, USA</p>&nbsp; &nbsp; <p class="time">11:00 to 08:00</p></div>