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 
} 

所以我的问题与上面的代码是在视图文件中做这样的事情

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

这是很容易当我有分贝实体IDS的很多js和查看文件之间的引用（少编码例如，我只需要打印project_id和skill_id ONCE）。但是这个解决方案的问题是，只要我的设计师改变了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后来。使用这种方法，您甚至可能不需要<div>上的id，如果是这种情况，您可以删除该属性，因为它不是必需的，在上面的onClick()函数中只使用data-。您可能还想给该容器<div>上课，如class="project"，并将呼叫更改为.closest(".project")以使其更具弹性。

Answer 2

这也不太敏感，虽然我喜欢@尼克的更好一点。

function onClick() 
{ 
    prjId = $(this).parent().find(".project_id").attr("value"); 
    skillId = $(this).parent().find(".skill_id").attr("value"); 

    // do stuff with the prjId and skillId 
}