如何使用javascript onclick事件处理程序同一类锚元素

how to use javascript onclick event handler for same class of anchor elements

本文关键字：一类 元素 javascript 何使用 onclick 事件处理 程序      更新时间：2023-09-26

这是我的javascript:

这里我使用ajax get请求抓取数据并调用这个函数:

function fetch_user_data(data) {
    $(user_board['results']).each(function(attributes,value){
        $('.main_container').append(
            '<div class="pin" id='+attributes+'>'
                <div class="holder">'
                    <a class="image" href="" title="Photo number 1" pin_id='+ attributes +'>'
                        <img src="'+ value['profile'] + '" />'
                    </a>'
                <p class="desc">' + value['name'] + '</p>'
                <ul id="pin_actions">'
                    <li id="awe"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;"></a></li>'
                    <li id="cof"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;" ></a></li>'
                    <li id="ban"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;" ></a></li>'
                </ul>'
            </div>'
        );
    });
}
function onTabAction(id,action) {
    console.log(id);
    console.log(action);
}

这里有一个问题，我的数据包含33个对象，然后根据对象有33个html框属于个人资料。我在锚标签中附加了onclick事件处理程序，并通过onTabAction自定义函数获得用户id。与id一起，我想得到一个字符串，如:onTabAction('+value['user_id']+',actionstr)，但当我调用此函数并在console.log中打印输出:它打印用户id一次和字符串等于对象数量，如li#actionstr。简而言之，我想得到两个字符串和id，并使url查询其他url。请帮助我在这个东西上，也如果我得到字符串和id我必须从主页删除锚，因为我把锚放在其他页面。

这是一个工作示例，您发布的代码我不能使一个工作示例，因为大部分都缺失:

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
<style type="text/css">
.clickable{
  cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var someData=["one","two","three"],
    i=0,
    user_id="my user id",
    $main=$('.main_container');
    for(i=0;i<someData.length;i++){
        $main.append(
                "<h1>"+someData[i]+"</h1>'
                <ul id='"pin_actions'">'
                    <li class='"clickable'" data-action='awe'>awe</li>'
                    <li class='"clickable'" data-action='cof'>cof</li>'
                    <li class='"clickable'" data-action='ban'>ban</li>'
                </ul>"
        );
    }
    $main.attr("data-userID",user_id);
    //attach onclick
    $('.main_container').find("li").on("click",onTabAction);
});
function onTabAction(e) {
    console.log("userID:",this.parentElement.parentElement.getAttribute("data-userID"));
    console.log("action:",this.getAttribute("data-action"));
}
</script>
</head>
 <body>
   <div class="main_container">
   </div>
 </body>
</html>
相关文章：