將內嵌Javascript轉換爲onclick事件

我會直言不諱。我的大部分技能都是純HTML和CSS。我想越來越擴大到JavaScript和jQuery和有一定的經驗，足夠的瞭解很多簡單的教程，並用自己的改變實現它們，但還不足以做太多我自己沒有的cheatsheet或類似的例子合作從。無論如何：將內嵌Javascript轉換爲onclick事件

我想嘗試THIS教程我發現使用Ajax來替換div的內容，但實現需要糟糕的標記（內聯JS）。他並沒有建議使用onclick事件的方式，而我更傾向於內聯JS。

這就是「AJAX引擎」，他提供了，這是我選擇要導入/鏈接，因爲我覺得這是愚蠢傾倒所有的HTML：

<script type="text/javascript"> 
// Version 1.1 of May 16, 2013 
function RequestContent(url,id) { 
var http; 
if (window.XMLHttpRequest) { 
    try { http = new XMLHttpRequest(); } 
    catch(e) {} 
    } 
else if (window.ActiveXObject) { 
    try { http = new ActiveXObject("Msxml2.XMLHTTP"); } 
    catch(e) { 
     try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
     catch(e) {} 
     } 
    } 
if(! http) { 
    alert('\n\nSorry, unable to open a connection to the server.'); 
    return false; 
    } 
http.onreadystatechange = function() { PublishContent(http,id); }; 
http.open('GET',url,true); 
http.send(''); 
} 

function PublishContent(content,id) { 
try { 
    if (content.readyState == 4) { 
     if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; } 
     else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); } 
     } 
    } 
catch(error) { alert('Error: '+error.name+' -- '+error.message); } 
} 
</script>

爲了使用功能RequestContent，他只提供了內嵌撲通JS像這樣的選項：

<ul> 
<li> 
<a href="javascript:RequestContent('/library/ajaxcontent1.html','fill-me3')"> 
Click here</a> to fill the div below with the Master Form .PHP logo. 
</li> 
<li> 
<a href="javascript:RequestContent('/library/ajaxcontent2.html','fill-me3')"> 
Click here</a> to fill the div below with the Master Form V4 logo. 
</li> 
<li> 
<a href="javascript:RequestContent('/library/ajaxcontent3.html','fill-me3')"> 
Click here</a> to fill the div below with the Most Popular logo. 
</li> 
</ul>

我明白內嵌JS如何工作的，我只是不知道如何把它寫在某種程度上允許一個onclick事件。

我該如何去轉換內聯JS？我非常感謝幫助。

來源

2016-01-15 Michi Bee

使用數據屬性保留值將允許你添加更多的鏈接，而無需編寫更多的JavaScript。

HTML

<ul> 
    <li> 
    <a href="#" class="someLink" data-request-content="ajaxcontent1"> 
Click here</a> to fill the div below with the Master Form .PHP logo. 
    </li> 
    <li> 
    <a href="#" class="someLink" data-request-content="ajaxcontent2"> 
Click here</a> to fill the div below with the Master Form V4 logo. 
    </li> 
    <li> 
    <a href="#" class="someLink" data-request-content="ajaxcontent3"> 
Click here</a> to fill the div below with the Most Popular logo. 
    </li> 
</ul>

的Javascript

$('.someLink').on('click', function(e) { 
    var content = $(e.currentTarget).data('request-content'); 
    RequestContent('/library/' + content + '.html', 'fill-me3'); 
});

來源

2016-01-15 20:55:03 xkcd149

與@Omar Yafer所說的內容 – xkcd149

這正是我所尋找的 - 非常感謝你！ –

只需將href改爲onclick即可，並擺脫javascript:。

<ul> 
    <li> 
    <a onclick="RequestContent('/library/ajaxcontent1.html','fill-me3')"> 
Click here</a> to fill the div below with the Master Form .PHP logo. 
    </li> 
    <li> 
    <a onclick="RequestContent('/library/ajaxcontent2.html','fill-me3')"> 
Click here</a> to fill the div below with the Master Form V4 logo. 
    </li> 
    <li> 
    <a onclick="RequestContent('/library/ajaxcontent3.html','fill-me3')"> 
Click here</a> to fill the div below with the Most Popular logo. 
    </li> 
</ul>

來源

2016-01-15 20:25:53

這有利於速戰速決。請記住，它確實偏離了不顯眼的Javascript。我個人儘可能避免事件樣式屬性。 https://en.wikipedia.org/wiki/Unobtrusive_JavaScript – zfrisch

這仍然是inline –

要使用onclick事件在外部JavaScript，你的元素需要有標識：

<ul> 
    <li> 
    <a id="one"> 
Click here</a> to fill the div below with the Master Form .PHP logo. 
    </li> 
    <li> 
    <a id="two"> 
Click here</a> to fill the div below with the Master Form V4 logo. 
    </li> 
    <li> 
    <a id="three"> 
Click here</a> to fill the div below with the Most Popular logo. 
    </li> 
</ul>

而在你的外部JavaScript您將使用Document.getElementById()和.onclick屬性：

document.getElementById("one").onclick = function() { 
    RequestContent('/library/ajaxcontent1.html','fill-me3'); 
} 
document.getElementById("two").onclick = function() { 
    RequestContent('/library/ajaxcontent2.html','fill-me3'); 
} 
document.getElementById("three").onclick = function() { 
    RequestContent('/library/ajaxcontent3.html','fill-me3'); 
}

來源

2016-01-15 20:43:58

實際上，因爲它是一個鏈接，最好將'/library/ajaxcontent?.html'添加爲href或data-attribute，通過jquery獲取href並阻止事件。代碼會稍微複雜一點，但它可以讓您根據需要添加儘可能多的鏈接。 –

下面是使用jQuery調用函數一個更通用的，簡單的方法。您應該添加鏈接和其他屬性作爲錨標記的一部分。

<ul> 
<li> 
<a href="#" link='/library/ajaxcontent1.html' class='fill-me3'> 
Click here</a> to fill the div below with the Most Popular logo. 
</li> 
<li> 
<a href="#" link='/library/ajaxcontent2.html' class='fill-me3'> 
Click here</a> to fill the div below with the Most Popular logo. 
</li> 
<li> 
<a href="#" link='/library/ajaxcontent3.html' class='fill-me3'> 
Click here</a> to fill the div below with the Most Popular logo. 
</li> 
</ul> 
<script> 
$(document).ready(function(){ 
$('a').click(function() 
{ 
    RequestContent($(this).attr("link"),$(this).attr("class")); 
}); 
}); 

function RequestContent(url,cls) 
{ 
    alert(url); 
    alert(cls); 
} 
</script>

實施例：https://jsfiddle.net/DinoMyte/Lkb0s60n/1/

來源

2016-01-15 20:48:35 DinoMyte

只有當你打算導航使用<a>元件，無論該幀或另一個，到目的地頁面。使用任何其他元素的JavaScript事件，並添加CSS，使其看起來像點擊如果你喜歡。（請注意，有一些方法可以縮短下面的腳本使用JQuery或其它JS工具包）

function NavigateTo(dest) { 
 
    // ... 
 
} 
 

 
var navTos = document.querySelectorAll('.navTo'); 
 
for (var i = 0; i < navTos.length; i++) { 
 
    navTos[i].addEventListener('click', function(evt) { 
 
    NavigateTo(evt.target.dataset.navPage); 
 
    }); 
 
}

.link { 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
.link:hover { 
 
    text-decoration: underline; 
 
}

<span class="link navTo" data-nav-page="place.htm">Go here</span>

來源

2016-01-15 20:50:35 Katana314

將內嵌Javascript轉換爲onclick事件

回答

相關問題