javascript - HTML ID 原来就像侵入式 JavaScript？

Question

大家好，看看下面的代码，就知道 id 属性有多么困惑

查看文件

<?php foreach($array_project as $prj) : ?>
   <div id="prj-p<?=$item['project_id'] ?>">
    <?php foreach($arr_skill as $skill) : ?>
        <h2><?=$skill['name'] ?></h2>
        <a class="view" id="skill-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">view</a>
        <a class="edit" id="edit-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">edit</a>
        <a class="delete" id="delete-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">delete</a>
    <?php endforeach; ?>
   </div>
<?php endforeach; ?>

Javascript 文件(使用 Jquery)

$('.view').live('click', onClick);
$('.edit').live('click', onClick);
$('.delete').live('click', onClick);

function onClick()
{
    // prjId and skillId are effectively arguments that are
    // traditionally passed via onClick(prjId, skillId), but here
    // we've attached them to element ids
    prjId = this.id.replace(/(skill\-p)|(\-s\d+)/g, '')
    skillId = this.id.replace(/(skill\-p\d+)|(\-s)/,'');

    // do stuff with the prjId and skillId
}

所以我对上述代码的问题是在 View 文件中执行类似的操作

<a class="view" id="skill-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">view</a>

实际上与

相同

<a onclick="onClick(<?=$prj['project_id'] ?>,<?=skill['skill_id'] ?>)">view</a>

后者实际上对程序员来说更具可读性。在前者中，我不喜欢如何派生自己的 id 命名约定来跟踪数据库实体 id:例如，-p 前缀表示项目 id，-s 前缀表示 Skill_id。然后我必须使用正则表达式来解析它。我不喜欢后者的内联 js 事件处理程序，因为那是侵入性的 javascript。

我考虑过像这样简化代码:

查看文件

<?php foreach($array_project as $prj) : ?>
   <div id="prj-p<?=$item['project_id'] ?>">
    <?php foreach($arr_skill as $skill) : ?>
        <h2><?=$skill['name'] ?></h2>
        <input type="hidden" class="project_id" value="<?=$prj['project_id'] ?>" />
        <input type="hidden" class="skill_id" value="<?=$prj['skill_id'] ?>" />
        <a class="view">view</a>
        <a class="edit">edit</a>
        <a class="delete">delete</a>
    <?php endforeach; ?>
   </div>
<?php endforeach; ?>

Javascript File (using Jquery)

$('.view').live('click', onClick);
$('.edit').live('click', onClick);
$('.delete').live('click', onClick);

function onClick()
{
    prjId = this.parentNode.childNodes[1].value;
    skillId = this.parentNode.childNodes[2].value;

    // do stuff with the prjId and skillId
}

当我有很多数据库实体 id 在 js 和 View 文件之间引用时(例如，我只需要打印一次 project_id 和 Skill_id )，这会更容易减少编码。但此解决方案的问题在于，一旦我的设计人员更改了 xhtml 架构，我就必须更新我的 javascript 文件以重新引用隐藏的输入字段。

是否有一种更简单、代码冗余更少的方法让 html 元素将数据传递给 JavaScript 函数？

Answer 1

您可以使用data attributes ，像这样:

<?php foreach($array_project as $prj) : ?>
   <div id="prj-p<?=$item['project_id'] ?>" data-pid="<?=$prj['project_id'] ?>" data-sid="<?=$prj['skill_id'] ?>">
    <?php foreach($arr_skill as $skill) : ?>
        <h2><?=$skill['name'] ?></h2>
        <a class="view">view</a>
        <a class="edit">edit</a>
        <a class="delete">delete</a>
    <?php endforeach; ?>
   </div>
<?php endforeach; ?>

然后在 jQuery 中访问它们:

$('.view, .edit, .delete').live('click', onClick);

function onClick()
{
    var div = $(this).closest("div"), 
        prjId = div.attr("data-pid"),
        skillId = div.attr("data-did");

    // do stuff with the prjId and skillId
}

此工作在 HTML4 中，是 part of the HTML5 standard ，所以现在没有冲突，以后完全兼容 HTML。通过这种方法，您甚至可能不需要 id关于<div> ，如果是这种情况，您可以删除该属性，因为不需要它，只需 data-那些用于 onClick()上面的函数。您可能还想给该容器 <div>一个类，例如 class="project"并将查找它的调用更改为 .closest(".project") 使其更有弹性。