如何在 javascript 函数中从 html 获取数据值？答案

【问题标题】：how to get data value from html in javascript function?如何在 javascript 函数中从 html 获取数据值？
【发布时间】：2014-02-22 18:37:21
【问题描述】：

您好，我是 jquery 和 ajax 的初学者。这是我的代码：

.html

<li class="list-group-item">        
    <h2>Vocabulary</h2>
    <h4>
      <span class="label label-success">Like Name</span>  
      <span class="label label-danger">GEPT</span>
      <button type="button" id="collapsible" class="btn btn-default" data-toggle="collapse" data-target="#intro" data-word="good" onclick="loadXMLDoc()">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </h4>
    <div class="collapse" id="intro">
      <div class="detail">
        <img src='http://www.michigan.com/assets/images/loading-module.gif'/>
      </div>         
    </div>
  </li>
  <li class="list-group-item">

javascript：

function loadXMLDoc()
{
  var xmlhttp;
  var word = $(this).data("word");
  var path='get_word_detail.php?word='+word;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("intro").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET",path,true);
xmlhttp.send();

}

我的页面包含一个包含许多折叠列表项的列表。每个列表项都包含一个用于展开项内容的按钮。

我想从 html 中获取“数据字”，但它没有用，有谁知道如何正确地做到这一点以及我是否可以只从 html 标签中传递参数，如“onclick =”loadXMLDoc（“好")"？

谢谢

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

使用jquery的attr函数

$("#collapsible").attr("data-word");

编辑

$(".btn").click(function(){
alert($(this).attr("data-word"));
});

【讨论】：

感谢您的回复。这对我有用，但我发现如果我有许多按钮 ID 为“可折叠”的列表项。这仅适用于第一项……有什么办法可以解决吗？
为所有按钮提供相同的类名，然后您可以像 $(".classname").attr(); 一样访问
因为我使用的是引导程序，所以我的按钮类是“btn btn-default”。我这样修改它： var word=$(".btn").attr("data-word");但它仍然是一样的......只适用于第一项...... :(

【解决方案2】：

你可以使用下面的代码

function loadXMLDoc(evt)
{
var element = evt.target;
  var xmlhttp;
  var word = $(element).data("word");
...
}

【讨论】：

我不知道为什么，但这不起作用:(我仍然无法获得单词值。

【解决方案3】：

您正在混合使用 jQuery 和纯 js，尝试以一种方式。但是，如果你想在点击时启动你的加载函数而不将 onclick attr 添加到 html 标记，请使用 jQuery：

$(document).ready(function(){
  $('#yourBtnId').click(function(){
     loadXMLDoc();
 })
});

如果我正确理解了这个问题。

【讨论】：