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は、ページの読み込みごとに1回このメソッドを内部的に呼び出すため、ロジックはスパンのテキスト値を1回だけチェックします。ロジックチェックvar dynText = textChange.text() == visibleText ? hiddenText : visibleText;を.clickに移動しただけで、ページの読み込みごとに1回ではなく、リンクがクリックされるたびにチェックが実行されます。

于 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 に答える