如何从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获取“数据字”，但是它没有用，有人知道如何正确执行吗，以及是否有可能我只通过html标签传递参数，例如“ onclick =“ loadXMLDoc（” good“） “？

谢谢

Answer 1

使用jQuery的attr功能

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

编辑

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

Answer 2

您可以使用以下代码

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

Answer 3

您正在混合使用jQuery和纯js，请尝试采用一种方法。 但是，如果您想在点击时启动加载功能而不向HTML标签添加onclick属性，请使用jQuery：

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

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