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_a类DIV时将每个faq_q加载到模态对话框中。模态的结构应该是：

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

＆＃13;

//var $dialog = $('<div>' + $('.faq_q') + '<hr>' + $('.faq_a') + '</div>'); // bad 

var $dialog = $('div, .faq_q, hr, .faq_a');// good 



$dialog.click(function() {
  alert('clicked');

});

＆＃13;

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

＆＃13;

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

1 个答案: