0

是否可以用 3 个不同的模态框制作 3 个不同的链接？这是我的例子：

<ul class="menu">
    <li><a class="link" href="#">link1</a>
        <div id="layer">
            <p>text 11</p>
        </div>
    </li>
    <li><a class="link" href="#">link2</a>
        <div id="layer">
            <p>text 2</p>
        </div>
    </li>
    <li><a class="link" href="#">link3</a>
        <div id="layer">
            <p>text3</p>
        </div>
    </li>
</ul>

...与 JS：

$(function () {    
    $('#layer').hide();
    $('.link').click(function (e) {
      var $message = $('#layer');

      if ($message.css('display') != 'block') {
        $message.show();

        var yourClick = true;
        $(document).bind('click.myEvent', function (e) {
          if (!yourClick && $(e.target).closest('#layer').length == 0) {
            $message.hide();
            $(document).unbind('click.myEvent');
          }
          yourClick = false;
        });
      }

      e.preventDefault();
    });
  });

http://jsfiddle.net/innpe/xbJ6u/1/

但是 3 个不同的链接显示相同的文本（第一个）。我理解这个问题，但不知道如何在一个功能中实现它。

4

1 回答 1

0

点击处理程序的第一行：

var $message = $('#layer');

...只是获取对第一个id="layer"div 的引用，它不会尝试将其与单击的项目相关联。试试这个：

var $message = $(this).next();

演示：http: //jsfiddle.net/xbJ6u/2/

当然，这依赖于将 div 显示为单击链接的下一个兄弟的结构。以下内容更灵活一点，它允许您稍微更改 html 的结构（只要链接及其相关的隐藏 div 属于同一个 li）：

var $message = $(this).closest("li").find("#layer");

请注意，您不应该对多个元素使用相同的 id。

于 2013-08-27T10:47:11.817 回答