Question

我想同时显示4个弹出窗口，在单击相应的图像按钮后显示4个不同的Flash幻灯片。

我使用12px制作弹出窗口，但无法完成图像按钮的其余部分。当我点击按钮随机闪光幻灯片播放。

请参考以下代码： -

JavaScript

Answer 1

这里的代码$("[id*=btnPopup]")意味着捕获包含btnPopup！的所有按钮，因为其余按钮包含该按钮因为名称（ btnPopup2 ， btnPopup3 ， btnPopup4 ）你使用相同的（第一个）代码捕获所有代码，并且你只按第一个代码被解雇了。

如果您希望使用此代码并将其设置为有效，请将第一个按钮重命名为 btnPopup0 。

参考： https://api.jquery.com/attribute-contains-selector/

但我看到更多的错误......

在每一次调用中存在的这一行$("#dialog").dialog({中的

仍然调用页面的相同部分来进行对话，但我看到其他部分的名称如 dialog1 ， dialog2 等......所以这也是你必须解决的问题。

Answer 2

你的代码中有很多错误！让我一一指出。

1。 $("[id*=a]").live("click"：其他3个部分中也存在类似的代码。 不使用实时来绑定事件。它被弃用了，并且有很多理由被弃用。摘自doc

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

同样在您的方案中，[id*=a]不是必需的。只需id=a即可。

live() jquery API Document

2. $("#dialog").dialog({：您在其他3个部分中也有相同的代码。您将事件绑定到相同的ID。这是BIG NO。不要使用相同的ID ID必须在整个DOM 中是唯一的。你可以利用课程。只需将相同的类名放到所有div中，然后使用类名绑定事件。 - 使用ids绑定事件时，Jquery会在DOM中找到带有该id的第一个元素（从顶部读取），并将事件绑定到该元素。

您正在多次重复相同的脚本逻辑make it Generic。所以清理你的HTML和SCripts，下面是你真正需要的。

HTML

    <tr>
      <td style="border-style: solid; border-color: #996600;">
        <asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
        <div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
          <embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
        </div>
      </td>
      <td style="border-style: solid; border-color: #996600;">
        <asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
        <div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
          <embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
        </div>
      </td>
      <td style="border-style: solid; border-color: #996600; text-align: center;">
        <asp:imagebutton id="c"  class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
        <div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
          <embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
        </div>
      </td>
      <td style="border-style: solid; border-color: #996600; text-align: center;">
        <asp:imagebutton id="d"  class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
        <div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
          <embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
        </div>
      </td>
    </tr>

注意： I added a class to all the imageButton，And then changed the div id to class。还添加了data-dialog-title属性来保存对话框的标题。 More About data Attribute您将在下面看到它的用法。

脚本

<script type="text/javascript">
$(function(){
  $.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
    $(this).dialog({
      title: $(this).data('dialog-title'), //extract the title here.
      height: 700,
      width: 1000,
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      }
    });
 });


  $(".imageDialog").on("click", function() {
     $(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
  });
});
</script>

在文档就绪时，将对话框插件应用于所有包含类dialog
仅使用类选择器.imageDialog
追踪到父td，然后追踪到找到具有班级名称的div＆＃39;对话框＆＃39;并打开它。

无法同时显示多个弹出窗口

2 个答案: