添加tel：仅用于移动浏览器的jquery代码

我有一个jQuery代码，它将tel：链接添加到围绕电话号码的范围内的样式，但它只适用于一个电话号码。我有一个包含20个不同电话号码的页面，当我将样式添加到所有电话号码时，它会将所有20个电话：链接与列表中的最后一个电话号码一起填充到所有电话：链接。添加tel：仅用于移动浏览器的jquery代码

如何使每个电话号码的tel：link正确填充？目前它仅将列表中的最后一个电话号码填入所有电话：链接。

任何帮助将不胜感激！

$(document).ready(function() { 
    // if Modernizr detects class "touch" 
    if($('html').hasClass('touch')) { 
     // for each element with class "make-tel-link" 
     $(".make-tel-link").each(function() { 
     //$.each(".make-tel-link", function() { 
      var jPhoneNumber = $(this).text(); 
      // wrap phone with href="tel:" and then insert phone number 
      $(this).wrapInner('<a class="jPhoneLink" href=""></a>'); 
      $('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber); 
     }); 
    } 
});

这是一个标记的例子。

<!DOCTYPE html> 
<html class="touch"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <title></title> 



    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 


    <!-- Extra Codiqa features --> 
    <link rel="stylesheet" href="codiqa.ext.css"> 

    <!-- jQuery and jQuery Mobile --> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="codiqa.ext.js"></script> 
    <script src="modernizr.custom.39046.js"></script> 



</head> 
<body> 
<!-- Home --> 
<div data-role="page" id="page2"> 
    <div data-theme="a" data-role="header"> 
     <div id="head"> <strong>Contacts</strong></div> 
     <div data-role="navbar" data-iconpos="left"> 
      <ul> 
       <li> 
        <a href="index.php" data-transition="fade" data-theme="" data-icon=""> 
         home 
        </a> 
       </li> 
       <li> 
        <a href="3.php" data-transition="fade" data-theme="" data-icon=""> 
         contact 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div data-role="content"> 

    <h1>CONTACT US</h1> 
<div class="layout"> 
<h4>Headquarters</h4> 
4235345 High bar<br /> 
Suite 345<br /> 
Quence, AL 45205 
<br /> 
<h4>Customer Service</h4> 
[email protected]<br /> 
<span class="make-tel-link">888-555-5555</span><br /> 
<span class="make-tel-link">800-555-5555</span><br /> 
<span class="make-tel-link">866-555-5555</span><br /> 

</div><br /> 
</div> 
    </div> 
</div> 
</body> 
</html>

来源

2013-10-10 user1701282

什么是你的问题的一个元素？ – Cthulhu

如何使每个电话号码的tel：link正确填充？目前它仅填充列表中的最后一个电话号码。 – user1701282

发布标记，它会更容易地帮助您 –

您可以先创建的链接，并在那里设置它的属性和它包装

$(function(){ 
     $.each($(".make-tel-link"), function() { 
      //replace all instances of '-' 
      var jPhoneNumber = $(this).text().replace(/-/g,''); 
      var link = $('<a />', {class: 'jPhoneLink', href: 'tel:'+jPhoneNumber}); 

      $(this).wrapInner(link); 
     }); 
});

工作示例

http://jsfiddle.net/pUkUb/3/

编辑：

中存在的问题你的脚本在这里：

$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);

你分配属性，所有有类，而不是刚刚创建

来源

2013-10-10 17:10:23

不错，也很有帮助，但parseInt会删除电话号码上的所有前导零 – Danimal

添加tel：仅用于移动浏览器的jquery代码

回答

相关问题