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

How to fire up a function when clicking on a link and then pass a class from that link

本文关键字：链接 然后 函数 单击 启动      更新时间：2023-09-26

我有这个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>"));
        });

将密钥作为数据添加到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/

特别针对您的示例

<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)); 
}

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

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);
});
相关文章：