Question

我有这个HTML：

<li class="sshjd839djjd blahclass"><a onclick="doSomething()">Blah Blah</a></li>

因此，当我点击我的链接时doSomething()被触发，我想抓住sshjd839djjd。我有很多不同键的链接，比如我需要获取正确的数据。

我对Javascript和jQuery了解不多，但是我需要它来创建管理面板，我将用它来管理我在Firebase中的数据，只是为了解释我在做什么。

我尽量避免使用onClick并使用.click，但这不起作用。

有人可以帮我一点吗？

那应该是什么：

function doSomething() {
   // grab class which is actually a child key from Firebase which I already implemented
   // do Firebase magic, I will know this once I get that key
}

按键/类添加如下：

var resultVetRef = new Firebase("https://myappname.firebaseio.com/data/users");
        resultVetRef.on("child_added", function(snapshot) {
          var key = snapshot.key();
          var data = snapshot.val();
          var name = data.name;
          var city = data.city;
          $("#results").append($("<li class=\"" + key + " blahclass\">" + "<a onClick=\"grabVet()\">" + name + ", " + city + "</a></li>"));
        });

Answer 1

将密钥作为数据添加到li

var resultVetRef = new Firebase("https://myappname.firebaseio.com/data/users");
        resultVetRef.on("child_added", function(snapshot) {
          var key = snapshot.key();
          var data = snapshot.val();
          var name = data.name;
          var city = data.city;
          $("#results").append($("<li class=\"" + key + " blahclass\" data-key=\""+ key +"\">" + "<a onClick=\"grabVet()\">" + name + ", " + city + "</a></li>"));
        });

然后就像：

<li class="sepcialKey blahclass" data-key="sepcialKey"><a>Blah Blah</a></li>

$('a').click(function(){
    alert($(this).closest('li').data('key'));
});

以下是演示：https://jsfiddle.net/ffyLgg3s/

Answer 2

特别针对您的示例

<li class="sshjd839djjd blahclass"><a>Blah Blah</a></li>

$('a').click(function(){
    alert( $(this).closest('li')[0].classList.item(0) );
});

使用classList和item方法。

或者如果您想使用自己的doSomething

<li class="sshjd839djjd blahclass"><a onclick="doSomething(this)">Blah Blah</a></li>

function doSomething(thisObj)
{
  alert($(thisObj).closest("li")[0].classList.item(0)); 
}

Answer 3

ClassList 方法为您提供了一个包含该元素所有类的数组。在您的情况下，它将为您的["specialKey", "blahclass"]元素返回数组<li>。

function doSomething() {
      // get the firs element of classList array and asign it to a variable
      var specialKey = this.parentElement.classList[0]; // "this" keyword is the reference to clicked element, "parentElement" give you "li" element reference
      // do Firebase magic, I will know this once I get that key
}

或修改您的追加代码：

var resultVetRef = new Firebase("https://myappname.firebaseio.com/data/users");
resultVetRef.on("child_added", function (snapshot) {
  var key = snapshot.key();
  var data = snapshot.val();
  var name = data.name;
  var city = data.city;
  // create li element
  var li = $("<li class=\"blahclass\"></li>");
  // create a element
  var a = $("<a>" + name + ", " + city + "</a>");
  a.on("click", function () {
    // when a clicked execute "doSomething" passing key as parameter
    doSomething(key);
  })
  // append a to li
  li.append(a);
  //append li to #results
  $("#results").append(li);
});

如何在单击链接时启动函数，然后从该链接传递类

3 个答案: