1

私は、当社が実行できるさまざまな分析に関する情報を掲載した Web ページを作成しています。私が設定しようとしている方法は、各分析の概要を示すセクションと、より詳細な情報を含むダイアログ ボックスを開く [詳細] ボタンです。

複数行のコードを使用して各ボタンと各ダイアログの ID を明示的に参照すると、これは正常に機能します。しかし、セレクターを使用してほんの数行のコードにしようとすると、もう機能しません。

HTML の一部を次に示します。

<div id="van_westendorp" class="solution price1">
    <h3 class="solution_header"><a href="#">Van Westendorp</a></h3>

    <div class="solution_content">
        <ul class="overview">
            <li><em>Price:</em> 
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
            </li>
            <li><em>Time:</em> 3-5 days</li>
            <li><em>Pros:</em></li>
                <ul>
                    <li>Easy task for the respondent.</li>
                    <li>Prices can be open-ended.</li>
                </ul>
            <li><em>Cons:</em></li>
                <ul>
                    <li>Deliverables imply more precision than actually exists.</li>
                    <li>Heavy reliance on respondents' understanding of questions.</li>
                </ul>
        </ul>

        <div id="van_westendorp_link" class="center">
            <button class="ui-state-default ui-corner-all detail">More Details</button>
        </div>

        <div id="van_westendorp_window" class="dialog" title="Van Westendorp Details">
            <h2 class="center">How It Works</h2>
            <ul>
                <li>Things happen.</li>
                <li>It's awesome.</li>
            </ul>
            <h2 class="center">Why It Works</h2>
            <ul>
                <li>Science!</li>
            </ul>
        </div>
    </div>
</div>

ID「van_westendorp_link」の div はボタンで、ID「van_westendorp_window」の div は開くダイアログ ウィンドウです。

そして、これが私がJavascriptのために試したことの最新の反復です:

$("[id$='link']").click(function(){
    $(this).next("[id$='window']").dialog('open');
    event.preventDefault();
});

コードの最初の行は機能します。2 行目をダイアログ ボックス ID への明示的な参照に置き換えると、すべて正常に動作します。この 2 行目で、セレクターを使用してダイアログ ボックスを参照しようとしていますが、これが私を混乱させています。

ダイアログ ボックスのコードにクエリ UI を使用しています。ダイアログ ボックスを正しく参照できない理由を教えてください。

4

2 に答える 2

1

event関数パラメータを忘れました:

$("[id$='link']").click(function(event){
                                   ^
                                  here
于 2012-08-30T16:07:48.440 に答える
0

.dialog('open')と置き換えます.dialog()

ただし、ダイアログを再度開く必要がある場合は、別の方法を使用する必要があります。

HTML:

<div id="van_westendorp_window" title="Box Title" style="display: none;">
...
</div>

Jクエリ:

$(document).ready(function() {
    $("[id$='link']").click(function(){
            var $theBox = $(this).next("[id$='window']");
            var $dialog = $('<div></div>')
            .html($theBox.html())
            .dialog({
                autoOpen: false,
                title: $theBox.attr('title')
            });

        $dialog.dialog('open');
        //event.preventDefault();
    });
});
于 2012-09-07T11:33:38.593 に答える