2

これが単純であることはわかっていますが、期待どおりに機能していないようです。

要素「ヘルプ」の jQuery UI ダイアログを動的に生成しようとしています。

ダイアログを閉じて（ダイアログのxボタン）、ヘルプアイコンをクリックして、ダイアログの表示を切り替えたい。このようにして、ユーザーは、必要に応じて、ページ ビュー中に複数回、ダイアログを表示したり、削除したりできる必要があります。

// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
    $(Element).dialog({
        autoOpen: false,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
$("a.help").live("click", function (event) {
    var helpDiv = "div#" + $(this).closest("span.help").attr("id");
    var dialogState = $(helpDiv).dialog("isOpen");
    // If open, close. If closed, open.
    dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});

編集：コードを現在のバージョンに更新しました。dialogState と dialog('open')/dialog('close') の値にまだ問題があります。

それぞれ内の $(Element).dialog("isOpen") から真/偽の値を取得できます。後で (少し異なるセレクターを使用して) 要素を見つけようとすると、$(helpDiv).dialog("isOpen") を正常に呼び出すことができないようです。これは、true/false の代わりに [] を返します。私が間違っていることについて何か考えはありますか？この時点で、私はこれに約1日半滞在しています...

4

2 に答える 2

3

たぶん、宣言dialogStateしている行を に置き換えvar dialogState = ! $(helpDiv).dialog( "isOpen" );ます。

説明:$(helpDiv).dialog( "option", "hide" )ダイアログが開いているかどうかをテストしません。ダイアログが閉じられたときに使用される効果のタイプを取得します。ダイアログが開いているかどうかをテストするには、次を使用する必要があります。$(helpDiv).dialog( "isOpen" ).詳細については、http://jqueryui.com/demos/dialog/#optionsおよびhttp://jqueryui.com/demos/dialog/#methodsを参照してください。

于 2012-05-15T17:48:20.643 に答える
1

次のコードを使用して動作させることができました。

$("div.tooltip").each(function (index, Element) {
    var helpDivId = '#d' + $(Element).attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    $(Element).dialog({
        autoOpen: true,
        title: $(Element).attr("title"),
        dialogClass: 'tooltip-dialog'
    });
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
    var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
    var helpDiv = $(helpDivId).first();
    var dialogState = helpDiv.dialog('isOpen');

    dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});

同じ要素を選択するだけでなく、同じになるようにセレクターを変更しました。また、Id、div、state を個別の変数に分けました。

于 2012-05-16T13:44:57.040 に答える