1

所以基本上我有几个链接需要显示滑动面板。我的初始代码是这样的。

function view(panel){
$(panel).slideToggle();
};

$('#link1').click(function(){
view('#panel1');
});

所以我现在遇到的问题是，在链接旁边我想在单击链接时包含一个向上的箭头，并且面板向下滑动并在单击时隐藏它并且面板向上滑动以指示再次单击链接将隐藏面板。箭头被赋予 class="arrow" 并且是链接的直接子级。

function view(panel){
$(panel).slideToggle();
};

$('#link1').click(function(){
view('#panel1');
$(this).children('.arrow').toggle();
});

这可行，但我不想重复$(this).children('.arrow').toggle;每个链接（会有很多链接）。所以我做了这个。

function view(panel){
$(panel).slideToggle();
$(this).children('.arrow').toggle();
};

$('#link1').click(function(){
view('#panel1');
});

这什么也不做，箭头保持显示：无。这是为什么？我看不出这有什么不同的解释。$(this) 不能在被调用的单独函数中使用吗？我尝试过搜索，但不知道如何搜索这类问题，除了.....好吧，输入那个问题，我没有得到任何有用的结果。有人可以告诉我如何通过在函数中定义它来完成这项工作，这样我就不必为每个链接重复代码了吗？

4

1 回答 1

0

你可以这样做：

view.call(this, '#panel1');

这将保留上下文。或者你可以这样做：

function view(panel, link){
    $(panel).slideToggle();
    $(link).children('.arrow').toggle;
};
$('#link1').click(function(){
    view('#panel1', this);
});

你也可以尝试这样的事情：

$('#link1, link2' /* or 'a.link', etc */, function() {
    // assuming the has is the panel #panel1
    //$(this.hash).slideToggle();

    // Or using what you already have
    $('panel' + this.id.match(/\d/)).slideToggle();

    $(this).children('.arrow').toggle;
    // Then do something based on the id?
    return false;
});
于 2013-08-12T20:26:40.427 回答