5

JQUERY UI で JQUERY を使用して、短いテキスト文字列のタイトルの値を変更しています。ページが最初に読み込まれると、ツール ヒントは正常に機能し、「クリックして展開」ツール ヒントが表示されます。ユーザーが「more...」または「less...」のテキストをクリックすると、クリック機能がトリガーされます (実際に実行されます)。ブログ投稿の可視性を切り替えます (それが行います); テキストを多めから少なめに、またはその逆に切り替えます (これは行われます)。ボタンのタイトルを更新して、ツール ヒントに新しいテキストが表示されるようにします (Chrome で見られるように更新されます)。ただし、ツールチップは変更されず、タイトルに「Collapse Post」と表示されていても、ツールチップには「Click for more」と表示されています。

JQUERY UI ツールチップが更新を認識し、マウスオーバー時に新しい値を正しく報告する方法でタイトルを動的に更新するにはどうすればよいですか?

/*
 * 
 * @DocumentReady
 */
$(window).ready(function(){ //Checks if the document is ready

    /*
     *
     *
    */
    $(".moreButtonClass").click(function(){ //Handles the button click
        // just leaves the number and appends to make the div ID
        var postID      = "#post" + this.id.replace(/[^\d]/g, "");
        var moreButton  = "#moreButton" + this.id.replace(/[^\d]/g, "");
        $(postID).toggle(); // Toggle visibility
        if($(postID).is(":visible")) {
            $(moreButton).text("less...");
            $(moreButton).attr("title", "Collapse Post");
        } else {
            $(moreButton).text("more...");
            $(moreButton).attr("title", "Show Post");
        }
    }); //Close the function

    /*
     *
     *
    */
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. ");
            });
        }
    }); // Close the function

    /*
     * 
     */
    $(function() {
        $( document ).tooltip({track: true}); // Allow JQUERY to handle tooltips
    }); // Close the function

}); // Close the Document Ready Function
4

2 に答える 2

10

使えません

$(moreButton).attr("title", "Show Post");

ツールチップは jQuery UI によって初期化されるためです。代わりにこれを使用します：

$(moreButton).tooltip( "option", "content", "Show Post - test" );

RTM: http://api.jqueryui.com/tooltip/#option-content

于 2013-06-06T18:45:16.067 に答える
5

ブートストラップで Jquery を使用していましたが、どちらも機能しませんでした。私はこれをしなければなりませんでした：

$("#myelement").attr("data-original-title", "New title/message" );

これは、ajax を使用して動的にロードされたモーダル内から機能し、元のページ要素が変更されたため、しっかりしているように見えます。

于 2017-09-06T17:26:52.467 に答える