Question

我有一个包含用户电话号码的目录。我不打印整个数字，以便人们不复制它们。我想使用jquery（或任何语言）隐藏最后4位数字，以便用户可以单击每个数字以显示完整数字。另外，我想只显示点击的号码。单击另一个号码将自动关闭前一个号码。请帮我。我所看到的一切都没有这样做。

以下是可行的代码示例。但是，当我点击一个数字时，它会显示所有订阅者页面中的所有数字。我想一次只透露一个号码。请帮忙。我不是很擅长jquery或javascript。

//
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip {
text-align: center;
}
div.panel {
widht: 50%;
height: 100px;
display: none;
}
</style>
</head>

<body>
<?php   
foreach($result->result() as $row) {
echo '<tbody><tr>
<td>'.$row->fullname.'</td>
<td>'. $row->bloodgroup.'</td>
<td><div class="panel"><p>'. $row->Phone.'</p></div>
<p class="flip">Show Phone Number</p></td>
<td>'. $row->Phone2.'</td>
<td>'. $row->email.'</td>
<td>'. $row->city.'</td></tr></tbody>'; }
?>
</body>
</html>
//

Answer 1

我创建了一个JSFiddle可能会帮助你作为一个例子。

基本上它会删除最后4个字母，将它放在一个数组中，并将一个点击处理程序绑定到它，这样它就可以找回哪个phonenumber属于它，然后用原来的字符替换它。

<强> HTML

<p class="phonenumber">+1 202 224 0173</p>
<p class="phonenumber">+1 202 717 0178</p>
<p class="phonenumber">+1 202 505 0179</p>
<p class="phonenumber">+1 202 645 0183</p>

<强>的jQuery

$(document).ready(function() {
    var phonenumbers = [];
    $(".phonenumber").each(function(i) {
        phonenumbers.push($(this).text());
        var newcontent = $(this).text().substr(0, $(this).text().length - 4)
        $(this).text(newcontent);
        $(this).bind("click", function() {
            if ($(this).text() == phonenumbers[i]) {
                $(this).text(phonenumbers[i].substr(0, phonenumbers[i].length - 4));
            } else {
            $(".phonenumber").each(function(x) {
                if ($(this).text() == phonenumbers[x]) {
                   $(this).text(phonenumbers[x].substr(0, phonenumbers[x].length - 4));
                }
            });            
            $(this).text(phonenumbers[i]);
            }
        });
    });
});

JSFiddle Demo

编辑：所以在您的情况下，您想要更改存储电话号码的p类，如下所示：

http://jsfiddle.net/LhsLyqyh/2/

Answer 2

添加上面 Daan 的代码（TY 先生），这将动态隐藏页面中所有锚标记的最后 3 个字符，它们的类为 click-reveal-phone-number，并将它们替换为“...” - 以帮助用户意识到有更多的数字要显示。

附加奖励：这将修剪电话号码开头和结尾的空格（如果有）。这将在移动设备和桌面设备上打开用户的默认电话应用程序。

加载时：0414 123 ... | 点击：0414 123 456

HTML

<a 
  href="tel:+61-414-123-456" 
  class="click-reveal-phone-number"
>
  0415 123 456
</a>

JS

  const allClickRevealNumbers = $("a.click-reveal-phone-number");

  allClickRevealNumbers.each(function (i) {
 
    const rawNumber = $(this).text()
    const rawNumberStartEndSpacesRemoved = rawNumber.trim();
    const rawNumberEllipsed = rawNumberStartEndSpacesRemoved.replace(rawNumberStartEndSpacesRemoved.substr(rawNumberStartEndSpacesRemoved.length - 3), '...'); 
    
    phonenumbers.push($(this).text());
    $(this).text(rawNumberEllipsed);

    $(this).bind("click", function (e) {

      if ($(this).text() === phonenumbers[i]) {
        $(this).text(rawNumberEllipsed);
      } else {
        allClickRevealNumbers.each(function (x) {
          if ($(this).text() === phonenumbers[x]) {
            $(this).text(rawNumberEllipsed);
          }
        });
        $(this).text(phonenumbers[i]);
      }

    });

  });

点击显示电话号码

2 个答案: