他們說HTML代碼中的javascript代碼被認爲是不好的做法，該如何解決？

所以，我明白，JavaScript混合到HTML是不好的，即使在頭。但讓我們看看這個代碼（我想從列表中刪除項目）他們說HTML代碼中的javascript代碼被認爲是不好的做法，該如何解決？

. 
. 
. 
<div>item1 <a href="#" onclick="return deleteThisItemById (1);">delete me</a><br /> 
<div>item4 <a href="#" onclick="return deleteThisItemById (4);">delete me</a><br /> 
<div>item5 <a href="#" onclick="return deleteThisItemById (5);">delete me</a><br /> 
. 
. 
.

此列表由PHP生成。 deleteThisItemById（）位於外部.js文件中。這仍然被認爲是不好的？如果是這樣，那麼什麼是規範的解決方案？ jQuery是可以接受的，因爲是原始的JavaScript。

來源

2013-02-18 John Smitth

我不認爲你在那裏做了什麼有什麼問題。內聯JavaScript確實是一件非常糟糕的事情，但是在頭部需要外部的JavaScript沒有任何問題。人們可以創建一個jquery點擊處理程序，而不是在onclick中執行，但即使如此，您的javascript和/或jquery仍然必須導入到某處嗎？ – 2013-02-18 01:09:36

Inline JS不是「非常糟糕」。它在某些情況下是限制性的，但內容和演示文稿之間的界限多年來一直模糊不清。如果可以，儘可能使用最佳做法，如果不能，可以對生活感到高興。 – isherwood 2013-02-18 01:13:02

如果您想了解綁定事件處理程序的各種方法，請查看http://www.quirksmode.org/js/introevents.html。 – 2013-02-18 01:25:20

$(function() { 
    $('a#my_id1').click(function() { 
    var myId = $(this).attr('id'); 
    return deleteThisItemByID(myId); 
    }); 
}); 

<div> 
    item1 
    <a id="my_id1" href="#">delete me</a> 
</div>

順便說一下，您的HTML無效。你有不正確的嵌套div標籤。

來源

2013-02-18 01:08:41 isherwood

'$ function（）'中的語法錯誤缺少括號：P。雖然公平，但我從OP中複製時遺漏了關閉的div標籤。我閱讀你的文章後改變了。 – Klik 2013-02-18 01:12:04

謝謝。語法固定。 – isherwood 2013-02-18 01:14:39

沒關係，但是如何將參數傳遞給.click（）函數？我的意思是如何知道哪個項目被點擊？ – 2013-02-18 01:15:21

簡單...給你想刪除一個類或ID 項（如果只有一個項目只使用一個ID）

<div>item1 <a href="#" class='deleteMe'>delete me</a><br /></div> 
<div>item4 <a href="#" class='deleteMe'>delete me</a><br /></div> 
<div>item5 <a href="#" class='deleteMe'>delete me</a><br /></div>

然後用jQuery

$('.deleteMe').on('click', function(event) { 
    $(this).remove(); 
});

目標元素

注意...如果您想刪除整個div，請使用此選擇器：

$('.deleteMe').closest('div').on('click', function(event) { 
    $(this).remove(); 
});

來源

2013-02-18 01:09:25 Klik

實際上它會是一個ajax請求，所以刪除div本身不會是解決方案:) – 2013-02-18 01:46:48

如果它的Ajax請求沒有影響。這隻會在線程通過代碼時（如果你把它放在成功函數中）或者如果你使用jQuery延遲對象（'promise'）時纔會改變。這實際上取決於元素在HTML文檔中的位置或者您已經動態插入它們的位置。如果HTML是你給我的，那麼我的兩個解決方案都可以工作。 – Klik 2013-02-18 02:28:32

你可以使用addEventListener來做到這一點。然後無的js代碼會在你的HTML：

var elems = document.querySelectorAll("div.removable"); 
for(var i=0;i<elems.length;i++){  
    elems[i].querySelector("a").addEventListener("click",function(e){ 
     var toRemove = this.parentNode; 
     var parent = toRemove.parentNode; 
     parent.removeChild(toRemove); 
    },false); 
}

然而

，我遍歷div的，所以我說這個類：

<div> 
    <div class="removable">item1 <a href="#">delete me</a></div><br /> 
    <div class="removable">item2 <a href="#">delete me</a></div><br /> 
    <div class="removable">item2 <a href="#">delete me</a></div><br /> 
</div>

看一看這個fiddle

來源

2013-02-18 01:25:15 cIph3r

我喜歡在代表這些對象的dom元素的「data-」屬性中存儲id和類似的元數據。

在這種情況下，我通常會在一個.js文件中使用類似的設置

<ul class="posts"> 
    <li class="post" data-post="####"> 
    <p>content...</p> 
    <ul class="actions"> 
     <li> 
     <a class="delete">delete</a> 
     </li> 
    </ul> 
    </li> 
</ul>

然後包括在頁面的底部：

$('.posts').on('click', '.actions .delete', 
function() { 
    // which post should be deleted? 
    var $post = $(this).closest('.post'); 
    // remove the DOM element 
    $post.remove(); 
    // some sort of ajax operation 
    $.ajax({ 
    // url, dataType, etc 
    data: { post_id: $post.data('id') } 
    }); 
});

這一個處理器將適用於所有「 .action .delete「元素，這意味着如果你想添加一個使用ajax來修改或添加時間到列表的分頁器，那麼這個事件處理程序仍然可以很好地工作。

來源

2013-02-18 01:38:39

啊哈！但是傳遞「陌生人」屬性會導致HTML無效...... – 2013-02-18 01:47:39

使用HTML5文檔類型時，data-xxx屬性有效 – 2013-02-18 01:55:53

他們說HTML代碼中的javascript代碼被認爲是不好的做法，該如何解決？

回答

相關問題