我有一个 jquery 代码，它将 tel: 链接添加到电话号码周围的样式中，但它仅适用于一个电话号码。我有一个包含 20 个不同电话号码的页面，当我将样式添加到所有电话号码时，它将填充所有 20 个 tel: 链接，并将列表中的最后一个电话号码填充到所有 tel: 链接。
如何正确填充每个电话号码的 tel: 链接？目前，它仅将列表中的最后一个电话号码填充到所有 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>
<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375e59515877515051505f5053505f1954585a" rel="noreferrer noopener nofollow">[email protected]</a><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>
最佳答案
您可以先创建链接，然后在其中设置其属性并对其进行包装
$(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);
});
});
工作示例
编辑:
您的脚本中的问题在这里:
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
您正在将该属性分配给具有该类的所有元素，而不是您刚刚创建的元素
关于android - 添加 tel : only to mobile browsers 的 Jquery 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19301595/