Question

我想在滑块打开时替换打开按钮（slidetoggle）的文本：

$("#flip").click(function(){
                $('#panel').slideToggle('slow', function() {
                    if ($('#panel').is(':hidden')) {
                        $('#flip').text().replace("close", "open");
                    }
                    else {
                        $('#flip').text().replace("open", "close");
                    }
                }); 
            });

我做错了什么？

Answer 1

您正在替换文本，但未将text属性更改为新值。试试这个：

if ($('#panel').is(':hidden')) {
    $('#flip').text(function(i, val) {
        return val.replace('open', 'close');
    });
}
else {
    $('#flip').text(function(i, val) {
        return val.replace('close', 'open');
    });
}

Answer 2

更换单词后，您没有将文本设置回元素

$("#flip").click(function () {
    $('#panel').slideToggle('slow', function () {
        $('#flip').text(function (i, text) {
            if ($('#panel').is(':hidden')) {
                return text.replace("open", "close")
            } else {
                return text.replace("close", "open")
            }
        })
    });
});

Answer 3

这应该为你做的工作：

$("#flip").click(function () {
    $('#panel').slideToggle('slow', function () {
        $('#flip').text(function (i, text) {
            if ($('#panel').is(':hidden')) {
                $('#flip').html("close")
            } else {
                $('#flip').html("open")
            }
        })
    }); });

如果你多次避免使用jQuery函数会更好。你可以使用这样的东西：

var btnFlip = $（“＃flip”）;

从此开始，您可以使用btnFlip.HTML。

注意：如评论中所述，这将通过“关闭”或“打开”替换按钮的文本。所以只有当这是按钮的唯一文本时才能使用它。

Answer 4

关注两件重要的事情来加快流程

1）每当你引用当前元素

时都使用$(this)

2）多次引用同一元素时将其存储在var中

$("#flip").click(function(){
      // store in a var since you are referring multiple times
      var flip = $(this);
      $('#panel').slideToggle('slow', function() {
         // get the inner text of the flip 
         var flipText = flip.text();
         // $(this) refers to #panel
         if ($(this).is(':hidden')) {  
         // 'flipText.replace("close", "open")' gives replaced Text
         //  copy back the replaced string 
             flip.text(flipText.replace("close", "open");
         }
         else {
              flip.text(flipText.replace("open", "close");
         }
      }); 
});

jquery文本替换将无法正常工作

4 个答案: