Код Jquery, добавляющий tel: только в мобильные браузеры

У меня есть код jquery, который добавляет ссылку tel: на стиль в диапазоне вокруг номера телефона, но он работает только для одного номера телефона. У меня есть страница с 20 разными телефонными номерами, и когда я добавлю стиль ко всем телефонным номерам, он заполнит все 20 телефонных ссылок последним телефонным номером в списке ко всем телефонным ссылкам.

Как я могу правильно заполнить ссылку tel: для каждого номера телефона? В настоящее время он заполняет только последний номер телефона в списке для всех телефонных ссылок.

Любая помощь приветствуется!

$(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>

android jquery mobile-safari tel
person user1701282    schedule 10.10.2013    source источник
comment
Какой у Вас вопрос?   -  person Cthulhu    schedule 10.10.2013
comment
Как я могу правильно заполнить ссылку tel: для каждого номера телефона? В настоящее время он заполняет только последний номер телефона в списке.   -  person user1701282    schedule 10.10.2013
comment
разместите разметку и вам будет легче помочь   -  person posit labs    schedule 10.10.2013
comment
Добавлена ​​разметка. Спасибо!   -  person user1701282    schedule 10.10.2013
comment
Альтернативный подход, который я использовал в прошлом, заключается в том, чтобы жестко закодировать гиперссылки tel:, но затем использовать CSS, чтобы замаскировать их под обычный текст в медиа-запросе на рабочем столе (что-то вроде a[href^="tel:"] {color: inherit; text-decoration: none; cursor: default;})   -  person Blazemonger    schedule 10.10.2013

Ответы (1)


arrow_upward
3
arrow_downward

вы можете сначала создать ссылку, а затем установить ее атрибуты и обернуть ее

$(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);

вы назначаете атрибут всем элементам, имеющим этот класс, а не только что созданному

person Juan    schedule 10.10.2013
comment
Красиво и полезно, но parseInt отбрасывает начальные нули в номере телефона. - person Danimal; 13.11.2015