0

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

我已经有一个辅助函数来发出请求并显示结果，它只需要一个字符串作为输入，即页面的名称。加载页面后，我运行了 $.each 语句来设置 href，但是在检查 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 函数？顺便说一句，这是该功能：

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

}

4

2 回答 2

1

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

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

因此，让我们继续将函数清理为现在，您使用第一个参数var setCurrentPage = function(e) { 传入的数据可以通过访问，因此只需将 page 的任何引用更改为。clicke.datae.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');
}
于 2013-10-15T21:44:28.670 回答
0

根据您的说明，我仍然认为从维护的角度来看，如果有人更改链接，他们会在编辑链接的位置看到 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;
});
于 2013-10-15T21:25:04.503 回答