Question

我会直言不讳。我的大多数技能都是纯HTML和CSS。我正在尝试越来越多地扩展到JavaScript和JQuery，并且有一些经验，足以理解许多简单的教程并使用我自己的更改来实现它们，但是如果没有备忘单或类似的示例工作，我自己也做不了多少从。无论如何：

我想尝试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函数，他只提供plop内联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？我非常感谢你的帮助。

Answer 1

只需将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>

Answer 2

要在外部javascript中使用onclick事件，您的元素需要具有ID：

<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');
}

Answer 3

这是使用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/

Answer 4

当您打算将此框架或其他框架导航到目标网页时，仅使用<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>

Answer 5

使用数据属性来保存该值将允许您添加更多链接，而无需编写更多的javascript。

HTML

this.value

的Javascript

<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转换为onclick事件

5 个答案: