将具有相同类的 DIV 加载到模式对话框中答案

【问题标题】：Load DIVs with same class into a modal dialog将具有相同类的 DIV 加载到模式对话框中
【发布时间】：2016-03-20 22:59:46
【问题描述】：

我正在创建一个相当简单的常见问题解答系统来检修我公司过时的系统。页面布局非常基础：

<div class="faq_c"> // Container
  <div class="faq_q">Question Goes Here</div>  // Question -- clicking this should open the Answer div in a dialog
  <div class="faq_a">Answer Goes Here</div> // Answer
</div>

faq_a 类在 CSS 中设置了 display:none 以隐藏它。

我想要做的是在单击父级 faq_q 类 DIV 时将每个 faq_a 加载到模式对话框中。 modal的结构应该是：

Question
--------- // Horizontal Rule formatted with CSS
Answer

jQuery（修订版）

$(document).ready(function(){
    $('.faq_a').each(function(){
            $('.faq_a').dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                draggable: false,
                overflow: scroll,
                title: "Frequently Asked Question",
                width: 500
            });

        $('.faq_q').click(function(){
            $('.faq_a').dialog('open');
        });
    });
});

这并不完全正确。而不是打开单个所需的faq_a，而是打开所有这些。我也不知道如何在 div 中获得所需的布局。

提前致谢。

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

看来你只需要fix your selector:

jsFiddle

//var $dialog = $('<div>' + $('.faq_q') + '<hr>' + $('.faq_a') + '</div>'); // bad 

var $dialog = $('div, .faq_q, hr, .faq_a');// good 



$dialog.click(function() {
  alert('clicked');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click me
</div>

【讨论】：

当我将它集成到我的原始代码中时似乎不起作用。现在我在第 17 行得到一个 Uncaught Exception SyntaxError: Unexpected token ) ，它就是 });
@rws907 你检查了var声明后的分号吗？
@rws907 如果可以在jsFiddle或者stack sn-p中设置，我再看一下。