javascript - 将具有相同类的 DIV 加载到模态对话框中

Question

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

<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 加载到模式对话框中。模态的结构应该是:

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 中获得所需的布局。

提前致谢。

Answer 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>