代码之家 › 专栏 › 技术社区 › Nate Pet

获取要在警报时显示的数据值

html5 jquery javascript

Nate Pet · 技术社区 · 6 年前

我有以下代码。我需要检索.data中的值。它显示为空白,尽管我知道当我在表单上显示它时它确实有值。

$('#Settings').on('click', '#senpop', function(e) {
  e.preventDefault();
  $('.field-validation-error').find('span').text('');
  $('#SensName').text($(this).data('sensname'));
  $('#SelectSenID').val($(this).data('sens'));

  // Note that the above code updates the values fine for the elements above. Below I am trying to get the value of "sensname" to show up in an alert but shows blank. 
  // I know there is a value because it does show up properly on the form but not able to 
  // retrieve it here. 

  var sens = $("#senpop");
  var inf = sens.data("sensname");
  alert(inf);

  $('#ViewModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: true,
  });

});

<div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
<div class="mobile_data">
  <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
</div>

1 回复 | 直到 6 年前

shender 6 年前

通过以下设置,我可以在chrome和firefox中打印数据属性。

首先-是的,最好不要使用 alert() 像这样调试。总是默认为 console.log() 。

接下来,我猜你的html结构更像这样:

<div id="Settings">
  Settings
  <div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
  <div class="mobile_data">
    <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
  </div>
</div>

…因为你在捆绑 click 处理程序到 #Settings 元素。确保 β设置 元素不是 <a> ,因为嵌套是无效的 <A & GT; 标签。

接下来,请确保将jquery和js脚本放在最后一个 </body> tag,这是一个最佳实践

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="/js/yourscript.js"></script>
</body>

…或者,用一个 document.ready 如果由于任何原因无法向正文中添加脚本:

$( document ).ready(function() {
  // your js code
});

所以,这是工作代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
    <div id="Settings">
      Settings
      <div class="hidden-lg hidden-sm hidden-md header_mobile">Name</div>
      <div class="mobile_data">
        <a href="#" id="senpop" data-sens="@item.Sens" data-sensname="@item.SensName">@item.Name</a>
      </div>
    </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script>
    $('#Settings').on('click', '#senpop', function(e) {
      e.preventDefault();
      console.log('#settings clicked');
      $('.field-validation-error').find('span').text('');
      $('#SensName').text($(this).data('sensname'));
      $('#SelectSenID').val($(this).data('sens'));

      // Below I am trying to get the value of sensor to show up in an alert but shows blank.
      // I know there is a value because it does show up properly on the form but not able to
      // retrieve it here.

      var sens = $("#senpop");
      var inf = sens.data("sensname");
      console.log(inf);

      $('#ViewModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: true,
      });
    });
  </script>
  </body>
</html>

下面是运行此代码并单击 #senpop :