將具有相同類別的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_a加載到一個模式對話框，當父級faq_q類DIV被點擊。模態的結構應該是：

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>