Question

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

如果我使用多行代码明确引用每个按钮和每个对话框的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来显示对话框代码，如果这很重要的话。任何想法，我无法正确引用对话框？

Answer 1

您在功能参数中忘记了event：

$("[id$='link']").click(function(event){
                                   ^
                                  here

Answer 2

将.dialog('open')替换为.dialog()

但是如果你需要再次重新打开对话框，你必须使用另一种方法。

HTML：

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

Jquery的：

$(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();
    });
});

遇到jquery选择器的问题

2 个答案: