Question

是否可以使用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个不同的链接显示相同的文本（第一个）。我理解这个问题，但是没有想法如何在一个函数中实现它。

Answer 1

点击处理程序的第一行：

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。

显示/隐藏在div外部单击的不同div

1 个答案: