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 
}