Question

我有一个小的切换脚本，可以切换面板，类和文本。我虽然无法切换文本。它会在第一次单击时更改，但之后不会更改。

Here是一个小提琴。以下是相关代码：

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

textChange.text(dynText);

谢谢！

Answer 1

首先，here's答案。

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

Answer 2

working demo fiddle link here

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

在click的绑定事件中移动这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");
    });
});

文本无法切换回来

2 个答案: