Javascript 函数语法，传递变量

我试图做一个简单的函数，但做了一些错误的事情。单击href会导致页面跳转，该功能将失败。小提琴：

HTML:

JS:

var-test1；
var测试2；
var测试3；
var测试4；
功能切换器（divToShow、thisVar、otherVar、ajaxContent）{
$（“#站点导航li a”）.parents（）.removeClass（“导航活动”）；
$（此）.addClass（“nav活动”）；
如果（其他变量）{
otherVar.detach（）；
}
if（typeof thisVar==‘未定义’）{
thisVar=$（divToShow+“ul.top-level”）.load（'/echo/html/'{
html:ajaxContent
}，函数（）{
警惕（“我是新的”）；
});
}否则{
此变量的附录（“#内容列表”）；
警惕（“我老了”）；
}
}
//最近的
$（#site nav.nav1”）。在（“单击”，功能（事件）{
切换器（“最近”、“测试1”、“测试2”和“
1
2
3
”；
event.preventDefault（）；
});
//亮点
$（#site nav.nav2”）。在（“单击”，功能（事件）{
切换器（“最近”、“测试2”、“测试1”和“
A
B
C
”；
event.preventDefault（）；
});​​

---

您正在将字符串作为所有这些参数传递。
因此，调用

detach（）

或

appendTo（）

之类的方法会引发错误，因为这些方法在字符串上不存在

您需要传递jQuery对象。

您有错误

otherVar.detach（）

因为，

otherVar

只是一个字符串，所以

.detach（）

不起作用，

.detach（）

接受jQuery对象

所以正确的格式应该是

---

$（otherVar.detach（）
谢谢。我已经改变了，但是我的ajax内容没有发布？谢谢我已经解决了这个问题，但现在我的ajax不会发布：
<nav>
<ul id="site-nav">
    <li class="nav1"><a href="#recent">Recent</a></li>
    <li class="nav2"><a href="#highlights">Highlights</a></li>
    <li class="nav3"><a href="#animals">Animals</a></li>
    <li class="nav4"><a href="#cars">Cars</a></li>
</ul>
</nav>
<div id="content-listing">
    <div id="recent">
        <ul class="top-level">
        </ul>
    </div>
    <!--end recent-->
    <div id="highlights">
        <ul class="top-level">
        </ul>
    </div>
    <!--end highlights-->
    <div id="animals">
        <ul class="top-level">
        </ul>
    </div>
    <!--end animals-->
    <div id="cars">
        <ul class="top-level">
        </ul>
    </div>
    <!--end cars-->
</div>
<!--end content-listing-->

var test1;
var test2;
var test3;
var test4;

function switcher(divToShow, thisVar, otherVar, ajaxContent) {
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(otherVar) {
        otherVar.detach();
    }

    if(typeof thisVar === 'undefined') {
        thisVar = $(divToShow + "ul.top-level").load('/echo/html/', {
            html: ajaxContent
        }, function () {
            alert("I'm new");
        });
    } else {
        thisVar.appendTo("#content-listing");
        alert("I'm old");
    }
}

//Recent
$("#site-nav .nav1").on("click", function (event) {
    switcher("#recent", "test1", "test2", "<li>1</li> <li>2</li> <li>3</li>");
    event.preventDefault();
});

//Highlights
$("#site-nav .nav2").on("click", function (event) {
    switcher("#recent", "test2", "test1", "<li>A</li> <li>B</li> <li>C</li>");
    event.preventDefault();
});​​