Question

我试图做一些非常简单的事情。基本上我有一个可点击的跨度，当我点击它打开编辑模式。我通过Bootstrap模式实现了这一点。这很好。

问题是，我使用plugin进行图像预览，这也可以作为模态。当我点击该跨度时，两个模态同时打开。它不应该打开图像预览模式。

我理解代码，因为＆＃39; lightgallery＆＃39;类。当我使用jquery单击该跨度时，我尝试删除该类。它从html中删除但该功能已从DOM加载。所以它不起作用。当我点击跨度时，两个模态同时打开。

如果我删除了＆＃39; lightgallery＆＃39;来自html的类并运行系统然后它的工作正常。来自DOM的问题。请帮我解决这个问题。

我认为这可能是一种更明智的做法，有人能指出我正确的方向吗？我非常感激。我已经尝试了很多方法。

HTML代码

<ul class="photo-grid lightgallery">
  <li class="col-sm-4 col-xs-6 col-md-3 col-lg-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="<?php echo base_url('assets/img/project/1.png'); ?>" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
  <a href="" class="thumbnail"> 
     <img class="img-responsive widthauto" src="<?php echo base_url('assets/img/project/1.png'); ?>">
     <figcaption>
       <p>Fading Light</p>
     </figcaption>
  </a>
  <span class="editbtnprofilea nopadd" data-toggle="modal" data-target="#portimgmodal"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></span>                                             
  </li>
</ul>

JS代码

$("#edithire").click(function (e) {
    $('.demo-gallery>.lightgallery').addClass('lightgalleryedit'); 
    $('.demo-gallery>.lightgalleryedit').removeClass('lightgallery');  
    e.stopPropagation();
});

Answer 1

我认为你正在初始化我们<ul>这将使其子<li>作为发起人，即。点击<li>或其任何成员会触发灯光图库显示，因为您的<span>也是会员。与this一样。

为了防止这种情况，有一些选择，但在这种情况下最好的选择是使用selector选项此选项告诉lightgallery，初始化时只有那些具有给定选择器的元素才能启动show。

$({ul-selector}).lightGallery({
  selector: ".onlyme"
});

现在将.onlyme分配给构成幻灯片的锚点或图像，但不分配给触发引导模式的span。

Example

模态对话框中的Jquery问题

1 个答案: