jquery顯示點擊字符串（tel :)

Question

默認情況下，試圖隱藏電話號碼，迫使用戶「點擊揭示」。除此之外，添加相關事件跟蹤功能，以便我們可以使用Google Analytics事件跟蹤跟蹤點擊次數。

我試過這個腳本：

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

通過使用這種格式默認隱藏的最後4位數字：

<a class="phone" href="tel:04480252578">044 802 52578</a>

但我還想使用完全不同的錨文本，隱藏整個電話號碼，直到點擊新的定位文字。

Answer 1

您不需要AJAX進行跟蹤;如果您嘗試使用Google Analytics（分析）之類的功能進行跟蹤，則只需點擊揭示內容即可在分析中觸發事件。

有幾種方法可以做到這一點，有些人可能會試圖隱藏電話號碼後面的絕對定位元素，說「揭示」。我選擇僅使用href來獲取數字並替換元素的文本。

$(document).ready(function(){ 

     // Use one instead of on so that you're only preventing default once 
     $('a[href^="tel:"]').one('click', function(e){ 

      e.preventDefault(); 

      // Gets the string from the href and removes anything not a digit 
      var phone_number = $(this).attr('href').replace(/\D/g,''); 

      // 044 802 52578 
      var phone_formatted = phone_number.substr(0, 3); 
      phone_formatted += ' ' + phone_number.substr(3, 3); 
      phone_formatted += ' ' + phone_number.substr(6); 

      // Trigger your analytics event 
      // ga is used by Google Analytics, 
      // it must be loaded before you do this 
      ga('send', { 
       hitType: 'event', 
       eventCategory: 'Interaction', 
       eventAction: 'click-reveal-phone',  
       eventLabel: 'Phone Number Revealed', 
       eventValue: 0, 
       nonInteraction: true 
      }); 
      // The above could be written like this as well 
      // ga('send', 'event', 'Interaction', 'click-reveal-phone', 'Phone Number Revealed'); 


      $(this).text(phone_formatted); 

    }) 

}) 

Here is a jsFiddle。