1

我正在构建一个网页，其中包含我们公司可以执行的各种分析的信息。我如何设置它是对每个分析进行高级概述的部分，然后是一个“更多详细信息”按钮，该按钮打开一个包含更深入信息的对话框。

如果我使用多行代码来明确引用每个按钮和每个对话框的 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();
});

第一行代码有效；如果我用对对话框 ID 的显式引用替换第二行，那么一切正常。这是我尝试使用选择器引用对话框的第二行，这让我很困惑。

我正在为对话框代码使用查询 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>

查询：

$(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 回答