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

Question

嗨，我是 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 中获取“data-word”，但它不起作用，有谁知道如何正确执行此操作以及我是否可以只从 html 标记传递参数，如“onclick=”loadXMLDoc(”好”)”？

谢谢

Answer 1

使用jquery的attr函数

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

编辑

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