添加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代碼

回答

相關問題