Question

我因为缺乏jQuery知识而陷入困境。非常感谢任何帮助。我有以下脚本来激活扩展内容区域：

$(document).ready(function(){
    $("a.moreExpand").click(function(){
       var myelement = $(this).attr("rel");
        $(myelement).slideToggle(function() {
            $("a.moreExpand").text(
              $(this).is(':visible') ? "LESS -" : "MORE +"
            );
          });
    });
});

我的HTML（在页面上的不同位置使用）：

<div class="moreExpandWrapp">
    <a href="javascript:void(0)" rel="#aboutExpand" class="moreExpand">MORE <span class="plus">+</span></a>
    <div class="moreExpandContent" id="aboutExpand">
        Lorem ipsum dolor sit amet ...
    </div>
</div>

到目前为止一直很好但是一旦我扩展/收缩内容区域，所有文本（更多/更少文本）都会在网站上更改。我试图像这样定位脚本：

$(document).ready(function(){
    $("a.moreExpand").click(function(){
       var myelement = $(this).attr("rel");
        $(myelement).slideToggle(function() {
            $("a.moreExpand", this).text(
              $(this).is(':visible') ? "LESS -" : "MORE +"
            );
          });
    });
});

所以它是：$("a.moreExpand", this).text( 但是，当然这不会有帮助，而是替换扩展的内容文本而不是链接文本。据我所知，这是因为“$ this”值基本上是整个切换区域而不是按钮。

我想定位链接副本而不是扩展div，但我不确定在这种情况下如何使用“$ this”（而是定位函数的第一部分）。

非常感谢您对此的意见。

谢谢！

Answer 1

事实上，JavaScript中的 this 指的是您当前的范围。

在slideToggle回调中，你的范围引用了“slided”元素，所以 this === myElement。您应该使用另一个var。

保留初始链接

http://jsfiddle.net/t4CQt/

$("a.moreExpand").click(function(){
    var myLink = this,
        myelement = $(this).attr("rel");
    $(myelement).slideToggle('normal', function() {
        $(myLink).text(
            $(this).is(':visible') ? "MORE +" : "LESS -"
        );
    });
});

用于扩展/收缩内容区域的jQuery .text（）函数

1 个答案: