Question

我正在使用Jquery UI对话框显示来自asp.net mvc视图列表的一些信息。

所以基本上你去了清单，你点击一个图标，你会得到一些特定记录的信息作为弹出窗口

如果页面中只有一个对话框，没有问题，对话框将打开正常，但如果我想要有多个对话框，那么当我点击其中任何一个时，所有对话框都会打开。

你能帮我解决我做错了吗？

 <td>                    
                <a class="clicker" dialogid="@item.Event.EventId" href="#"> Catering Details </a>
                <div class="dialog @item.Event.EventId" title=""> 
                     <p>@{Html.RenderAction("ViewEvent", "Home", new { EventId = item.Event.EventId });}</p>
                     </div>


                  @if (item.Event.SpecialRequirements != null)
             {
                  <img class="clicker2" dialog2id="@item.Event.EventId" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Special Requirements" src="~/Images/email-alert-icon.png"  /> 
                     <div class="dialog @item.Event.EventId" title="Special Requirements"> 
                     <p>@item.Event.SpecialRequirements</p>
                     </div>
             }  

        </td>

<script>
    $m = jQuery.noConflict();
</script>
<script>

    $m(function ()
    {

        $m('.dialog').dialog({
          autoOpen: false,
          show: { effect: "blind", duration: 1000 },
          hide: { effect: "explode", duration: 1000 },
          width:'800px',
          buttons: {
              Close: function () {
                  $m(this).dialog("close");
              }
          }
        });

      $m(".clicker").on("click", function () {
          $m("." + $(this).attr('dialogid')).dialog("open");
      });     

      $m(".clicker2").on("click", function () {
          $m("." + $(this).attr('dialog2id')).dialog("open");
      });

  });

</script>

Answer 1

您使用了$ m（'。dialog'）。这将打开所有对话框，因为您已指定了类名。

您可以为每个对话框指定一个唯一ID，并将$ m（'。dialog'）替换为$（'＃dialogId'）;

Answer 2

使用您的HTML结构，我认为您可以避免在此处使用其他类或ID（当然，如果您仅仅为此使用它们）。

考虑以下HTML：

<td>                    
    <a class="clicker" href="#">Catering Details</a>
    <div class="dialog" title=""> 
        // Your info
    </div>

    @if (item.Event.SpecialRequirements != null)
    {
        <img class="clicker" src="~/Images/email-alert-icon.png"  /> 
        <div class="dialog" title="Special Requirements"> 
            // Your info
        </div>
    }  

</td>

在你的JS中，你可以只打开下一个对话框：

$(".clicker").on("click", function () {
    $(this).next('.dialog').dialog("open");
});

修改

如果你想使用id，我想你可以改变第二个对话框的类：

<td>                    
    <a class="clicker" dialogid="@item.Event.EventId" href="#">Catering Details</a>
    <div class="dialog @item.Event.EventId" title=""> 
        // Your info
    </div>

    @if (item.Event.SpecialRequirements != null)
    {
        <img class="clicker2" dialogid="@item.Event.EventId" src="lalala"  /> 
        <div class="dialog2 @item.Event.EventId" title="Special Requirements"> 
            // Your info
        </div>
    }  

</td>

JS将是：

$m('.dialog, .dialog2').dialog({
    autoOpen: false,
    show: { effect: "blind", duration: 1000 },
    hide: { effect: "explode", duration: 1000 },
    width:'800px',
    buttons: {
        Close: function () {
            $m(this).dialog("close");
        }
    }
});

$m(".clicker").on("click", function () {
    $m(".dialog." + $(this).attr('dialogid')).dialog("open");
});     

$m(".clicker2").on("click", function () {
    $m(".dialog2." + $(this).attr('dialogid')).dialog("open");
});

希望它有所帮助！

Jquery ui对话框打开多个对话框而不是一个

2 个答案: