jquery - 多个 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代码，您不能对div使用相同的id，还需要以某种方式将元素a与元素绑定(bind)>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都引用了作为模态的每个div，也许代码应该是这样的

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