1

我有这个小切换脚本，它切换面板、类和文本。我在切换文本时遇到了麻烦。它在第一次单击时更改，但之后不会更改回来。

这是一个小提琴。这是相关的代码：

var visibleText = "Hide";
var hiddenText = "Show";
var textChange = $("#hidewrap a span");
var dynText = textChange.text() == visibleText ? hiddenText : visibleText;

textChange.text(dynText);

谢谢！

4

2 回答 2

2

首先，这是答案。

其次，解释：您检查<span></span>元素文本的逻辑在 $.ready 方法中。jQuery 在每次页面加载时在内部调用此方法一次，因此逻辑只会检查一次 span 的文本值。我只是将逻辑检查var dynText = textChange.text() == visibleText ? hiddenText : visibleText;移到 .click 中，这样每次单击链接时都会进行检查，而不是每次加载页面一次。

于 2012-05-20T09:47:52.500 回答
1

工作演示小提琴链接在这里

可见文本需要隐藏，隐藏应使用当前可见文本更新，

在单击的绑定事件中移动这 3 行将为您解决问题：

   var visibleText = $("#hidewrap a span").text();

    var dynText = textChange.text() == visibleText ? hiddenText : visibleText;
    hiddenText = textChange.text();

jQuery代码

$(document).ready(function() {
    var panel = $("#topnav nav");
    var button = $("#hidewrap");
    var hiddenClass = "hidden";
    var visibleText = $("#hidewrap a span").text(); //"Hide";
    var hiddenText = "Show";
    var textChange = $("#hidewrap a span");


    var classAdd = $("aside#topnav");

    button.click(function(e) {
        var visibleText = $("#hidewrap a span").text();

        var dynText = textChange.text() == visibleText ? hiddenText : visibleText;
        hiddenText = textChange.text();
        e.preventDefault();
        e.stopImmediatePropagation();

        textChange.text(dynText);
        classAdd.toggleClass(hiddenClass);
        panel.slideToggle("fast");
    });
});​
于 2012-05-20T09:45:58.307 回答