Question

也许我正试图以错误的方式解决这个问题，但是我已经设置了我的服务器来构建页面，如果请求（如果JS基本上没有启用），否则我希望它发送请求的页面然后JS应该覆盖主导航，只需使用jQueries .load函数请求和显示内容。

我已经有了一个辅助函数来发出请求并显示结果，它只需要一个字符串作为输入，这是页面的名称。加载页面后，我运行$ .each语句来设置hrefs，但是在检查DOM时它似乎没有出现，我不知道为什么。

var $menuAnchors = $("#menu a");
$.each($menuAnchors, function (index, value) {
if (index == 0) {
  $menuAnchors.eq(0).click('home', setCurrentPage);
}
if (index == 1) {
  $menuAnchors.eq(1).click('services', setCurrentPage);
}
if (index == 2) {
  $menuAnchors.eq(2).click('contact', setCurrentPage);
}

})

它在if语句中达到了正常，所以我必须使用.click函数错误，但是我也尝试将它应用于.attr函数，然后它会显示在dom中，但它不会似乎工作正常。如果我手动调用该函数来更改页面它工作正常，所以我假设此时可能两个事件触发方法都正常工作，但也许它仍然将请求发送到服务器，我需要停止来自支援的事件？如果是这样，我该怎么做？我可以在if语句中执行此操作，还是必须修改evenhandler函数？这是函数btw：

var setCurrentPage = function(page) {

//change contents
var $content = $("#content");
$content.empty();
$content.load("/html/ajax/" + page + ".html");

//set menubar class
var $listItems = $("#menu li");
$.each($listItems, function (index, value) {
  $listItems.eq(index).removeAttr("class");
  if (page == "home" && index == 0) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "services" && index == 1) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "contact" && index == 2) {
    $listItems.eq(index).attr("class", "current");
  }
  })

}

Answer 1

当触发jQuery事件时，jQuery会将event对象作为第一个（也是唯一的）参数传递给该方法。

第一个问题是setCurrentPage的“page”参数不是href，它是事件对象。

让我们继续将功能清理为var setCurrentPage = function(e) { 现在，您通过click可以访问带有第一个参数的e.data传入的数据，因此只需将页面的任何引用更改为e.data。

最后，为了使链接不被访问，您可以致电e.preventDefault()。

（额外点：removeClass可以在元素集合上调用，不需要遍历each。当事件被触发时，this将引用HTML元素事件发生在，所以我们可以强制current类。）。

最终代码最终看起来像

function setCurrentPage(e) {
    //change contents
    var $content = $("#content");
    $content.empty();
    $content.load("/html/ajax/" + e.data + ".html");
    //set menubar class
    $("#menu li .current").removeClass('current');
    $(this).addClass('current');
}

Answer 2

根据您的澄清，我仍然认为从维护的角度来看这样的最佳方法是，如果有人正在更改链接，他们会在编辑链接时看到pagename参数。

示例HTML：

<div id="menu">
    <a href="/" data-pagename="home">Home</a>
    <a href="/about.html" data-pagename="about">About</a>
</div>

示例JavaScript：

$('#menu a').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});

这样做的副作用是你可以完全将这种方法与#menu分离，在我的例子中，在你向链接添加data-pagename =“something”的任何地方，该链接会立即使用setCurrentPage。

$('a[data-pagename]').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});

如何使用jquery阻止请求在href上进行？

2 个答案: