从页面链接获取数据值到JS

Question

我的页面上目前有一个由 PHP 从 MySqli DB 生成的表，其中包含名称以及 x 和 y 坐标。然而，这意味着在页面上显示 x、y 和 ID 数据。我使用 JS 重新读取 onclick 侦听器中的 x 和 y，我需要修改我的代码，以便不需要向用户显示此信息。我当前的代码如下。

<script language="javascript">
$(document).ready(function () {
  $(".systemname").on("click", function (event) {
    event.preventDefault();
    var $row = $(this).parent().parent();
    var x = $row.children().eq(2).text() + "px";
    var y = $row.children().eq(3).text() + "px";
    var m = $row.children().eq(4).text() + ".jpg";
    var i = $row.children().eq(5).text();
    $('#mapinfo').html(m);  
    var imageUrl = m;
    $("#mapcontent").css("background-image", "url(<?=$imglnk?>)");
    $("#pointer").css({"left": x, "top": y});
    $("#systeminfo").load('getsysteminfo.php?id='+i);
    
  });
});
</script>

我现在需要修改我的代码才能使用以下内容（或者是否有更好的解决方案）

<a href='#' class='systemname' data-id="1" data-points="x350y210">system 1</a>
<a href='#' class='systemname' data-id="2" data-points="x120y410">system 2</a>

请记住，页面上最多可以有 20 个链接

我尝试过谷歌搜索，但结果似乎只是页面上的单个链接，而不是多个

Answer 1

您可以使用 jquery data() 函数读取项目上的数据属性。

<script language="javascript">
$(document).ready(function () {
  $(".systemname").on("click", function (event) {
    event.preventDefault();

    var id = $(this).data("id");
    var [x, y] = $(this).data("points").substring(1).split("y");

    $("#mapcontent").css("background-image", "url(<?=$imglnk?>)");
    $("#pointer").css({"left": x + "px", "top": y + "px"});
    $("#systeminfo").load('getsysteminfo.php?id='+id);
    
  });
});
</script>