Question

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

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）不能在一个被调用的单独函数中使用吗？我试过搜索，但不知道如何搜索这类问题，除了.....好键入这个问题，我没有得到任何有用的结果。有人可以告诉我如何通过在函数中定义它来完成这项工作，这样我就不必为每个链接重复代码了吗？

Answer 1

你可以这样做：

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

麻烦$（'this'）。孩子不在我的功能

1 个答案: