javascript - 使用 jQuery 更新 div 中的 p

Question

我正在尝试更新具有 .bus_latitude 类的 p 元素的文本。

首先，我找到具有 data-* 属性 的父 div。检索 div 后，我尝试找到最接近的 p 元素，该元素具有 .bus_latitude 类，并将其文本设置为一些静态内容。我尝试了无数的方法，特别是因为 jQuery 有多种方法可以做到这一点，但没有一个起作用。

所以在这里我注入(inject)一个带有 data-id 属性的 div这个:

var div = $('<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 bus_card" data-id="'+bus.getKey()+'"><br/><br/>'+
  '<div class="thumbnail">'+
  '  <div class="caption">'+
  '    <div class="col-lg-12">'+
  '      <div class="header">'+
  '       <h4 class = "line_name" style="text-align:center;color:'+line.child("colorNormal").val()+';"><strong>Linha '+line.getKey()+'</strong></h4>'+
  '      </div>'+
  '    </div>'+
  '    <div class="col-lg-12 well well-add-card">'+
  '      <h4 class="pull-left">Cartão:</h4>'+
  '      <h4 class="pull-right">'+bus.child('cardid').val()+'</h4>'+
  '    </div>'+
  '    <div class="col-lg-12 bus_information">'+
  '      <div style="padding-left:10px!important;" class="row">'+
  '        <p class="pull-left"><kbd>Latitude</kbd></p>'+
  '        <p class="pull-right bus_latitude">'+bus.child('lat').val()+'</p>'+
  '      </div>'+
  '      <div style="padding-left:10px!important;" class="row">'+
  '        <p class="pull-left"><kbd>Longitude</kbd></p>'+
  '        <p class="pull-right bus_longitude">'+bus.child('long').val()+'</p>'+
  '      </div>'+
  '      <div style="padding-left:10px!important;" class="row">'+
  '        <p class="pull-left"><kbd>Velocidade:</kbd></p>'+
  '        <p class="pull-right bus_velocity">35km/h</p>'+
  '      </div>'+
  '      <div style="padding-left:10px!important;white-space: nowrap; overflow:hidden;" class="row">'+
  '        <p class="pull-left"><kbd>Geo-localização:</kbd></p>'+
  '        <class = "bus_georeference">&nbsp&nbsp'+streetNameOfPosition+'</>'+
  '      </div>'+
  '    </div>'+
  '    <button type="button" class="btn '+(bus.child('state').val() === 1 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Terminal</button>'+
  '    <button type="button" class="btn '+(bus.child('state').val() === 2 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Andamento</button>'+
  '    <button type="button" class="btn '+(bus.child('state').val() === 3 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Paragem</button>'+
  '  </div>'+
  '</div>'+
'</div>').appendTo("#bus-cards-container");

因此，我有一个按钮的事件监听器，用于使用一些静态内容更新 p 元素。

这是不起作用的地方:

    function updateBusOnHTML(bus) {
       alert(bus.getKey());
       $("div[data-id='" + bus.getKey() +"'] .bus_information .bus_latitude").val("39.284035"); //this doesn't work, bus.getKey()
}

两个 data-id 都是正确的，即使在渲染 HTML 时，div 的 id 也与进入 updateBusOnHTML() 的 id 完全相同。那么为什么它不更新 p 文本呢？

Answer 1

.val() 用于更新表单元素(如 input)的值。请改用 .text() 或 .html() 等方法。

另一个建议:使用 console.log() 而不是 alert()。