Question

我正在努力为我的投资组合创建自己的简单模态体验。我要做的就是让用户点击一个图像，弹出一个模态框，其中包含与点击图像相关的信息。这一切都很好，但我似乎无法让Jquery以编程方式执行此操作。我的Javascript生锈了，有些东西没有点击我的大脑，我知道这应该不会很难。

这是我的HTML

 <div class="projects">
    <div class="projects__grid">
      <a class="modal-trigger" data-target="modal1">
        <div class="projects__image">
          <div class="modal" id="modal1">
            <div class="project__desc modal-content">
              <p class="text">1st modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
              </p>
            </div>
          </div>
        </div>
      </a>

      <a class="modal-trigger" data-target="modal2">
        <div class="projects__image">
          <div class="modal" id="modal2">
            <div class="project__desc modal-content">
              <p class="text">2nd modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
              </p>
            </div>
          </div>
        </div>
      </a>
  </div>
</div>

确定我可以为每个模态触发器创建自定义类或id，但我想保持我的代码DRY。我试过了：

$(this, '.modal-trigger').click(function() { $(this, '.modal').toggle(); })

和许多其他类似的攻击角度。我在这里错过了什么？我只需要从单击的模态触发器中检索相关模态内容的嵌套ID。我知道我必须以某种方式使用'this'，但我似乎无法弄明白。

感谢您的任何见解，对不起，如果之前已经发布，我找不到任何回答我的问题的东西......一些。

Answer 1

我做了一个小提琴，这应该有效

jsfiddle

 $('.modal-trigger').click(function(event) {
    let modalExample = $(this).find('.modal');
    modalExample.toggle();
});

您必须在点击事件

中删除此内容

单击模态触发器时尝试显示关联模式内容

1 个答案: