脚本用于填充HTML元素与不工作一以.json文件移动

Question

在THIS页面内容我对形式的电话号码一帮“占位符”的：07xxxxxxxx。点击绿色按钮“VEZI TELEFON”后，每个绿色框中的占位符将通过$ .ajax从JSON文件中替换为真实的电话号码。

该脚本在台式机和笔记本电脑上运行良好，但是，手机上的第一个占位符未被替换。在只有一个占位符的详细信息页面上会发生同样的情况。

JSON文件具有内容：

{ 
     "telefoane": [{ 
     "id": 1, 
     "tel": "0743127315" 
     }, { 
     "id": 2, 
     "tel": "072245875" 
     }, { 
     "id": 3, 
     "tel": "0756129458" 
     }, { 
     "id": 4, 
     "tel": "0756129668" 
     }, { 
     "id": 5, 
     "tel": "0724153333" 
     }] 
    } 

的JS代码：

function showTel() { 
    $(".telefon").on('click', function(){ 
     var index = $(this).closest(".imobil").index(); 
     var $element = $(this); 
     $.ajax({ 
      url: 'telefoane.json', 
      dataType: 'json', 
      type : 'get', 
      cache : 'false', 
      success: function(data){ 
       var tel = data.telefoane[index].tel; 
       console.log(index + ": " + tel); 
       $element.parent().find('.telefon .tel').text(tel); 
      } 
     }); 
    }); 
} 
showTel(); 

// Arata telefon 
$('.telefon').on('click', function(){ 
    $(this).children('.vezi').hide(); 
    $(this).children('.tel').show(); 
}); 

控制台奇怪的显示桌面和移动两个不同的东西。指数值不同，它的接缝... 桌面：

0: 0743127315 
1: 072245875 
3: 0756129668 
4: 0724153333 
Uncaught TypeError: Cannot read property 'tel' of undefined 

手机：

1: 072245875 
2: 0756129458 
4: 0724153333 
Uncaught TypeError: Cannot read property 'tel' of undefined 

什么是错的代码？谢谢！

Answer 1

如何不依赖指数（），但ID呢？

function showTel() { 
    $(".telefon").on('click', function(){ 
     var index = $(this).closest(".imobil").data("id"); 
     var $element = $(this); 
     $.ajax({ 
      url: 'telefoane.json', 
      dataType: 'json', 
      type : 'get', 
      cache : 'false', 
      success: function(data){ 
       var tel = data.telefoane[index].tel; 
       console.log(index + ": " + tel); 
       $element.parent().find('.telefon .tel').text(tel); 
      } 
     }); 
    }); 
} 
showTel(); 

'上$（ “就该”）（ '点击

Answer 2

您应该click监听器添加到按钮，而不是直接将其添加到容器中。

试试这个：

$(".vezi")on('click', function(){ 
    var index = $(this).closest(".imobil").index(); 
    var $element = $(this); 
    $.ajax({ 
     url: 'telefoane.json', 
     dataType: 'json', 
     type : 'get', 
     cache : 'false', 
     success: function(data){ 
     var tel = data.telefoane[index].tel; 
     $element.parent().find('.telefon .tel').text(tel); 
     } 
    }); 
});