多個jQuery簡單模態框

Question

您將如何利用jQuery簡單模式框，對於一個頁面上的多個實例，每個描述都有獨特的內容？

我會使用「.this」函數嗎？

HTML：

<div id='class-descriptions'> 
     <a href='#' class='basic'>Description 1</a> 
     <a href='#' class='basic'>Description 2</a> 
     <a href='#' class='basic'>Description 3</a> 
     <a href='#' class='basic'>Description 4</a> 
    </div> 

<div id="description1">description 1 content</div> 
<div id="description1">description 2 content</div> 
<div id="description1">description 3 content</div> 
<div id="description1">description 4 content</div> 

JS：

jQuery(function ($) { 
    // Load dialog on page load 
    //$('#description').modal(); 

    // Load dialog on click 
    $('#class-descriptions .class').click(function (e) { 
     $('#description1').modal(); 

     return false; 
    }); 
}); 

Answer 1

您需要知道的第一件事是修復html代碼，您不能使用相同的id作爲div，還需要以某種方式將元素a與元素div其中有內容

<div id='class-descriptions'> 
    <a href='#' id="description-1" class='basic'>Description 1</a> 
    <a href='#' id="description-2" class='basic'>Description 2</a> 
    <a href='#' id="description-3" class='basic'>Description 3</a> 
    <a href='#' id="description-4" class='basic'>Description 4</a> 
</div> 

<div id="content-1">description 1 content</div> 
<div id="content-2">description 2 content</div> 
<div id="content-3">description 3 content</div> 
<div id="content-4">description 4 content</div> 

假設每個元素a它refered每個div這將是一個模式，也許代碼應該是這樣的

$(document).ready(function(){ 
    $('#class-descriptions .basic').click(function (e) { 
     var aux = $(this).attr('id'); 
     aux = aux.replace('description','content'); 
     $(aux).modal(); 
    }); 
}); 

Answer 2

$（ '＃類描述的.class'）是錯誤的。使用.basic而不是.class