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和元素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();
    });
});

Answer 2

$（'＃class-descriptions .class'）是错误的。使用.basic而不是.class

多个jQuery简单模态框

2 个答案: