使用JQuery，我们如何使用一个函数来显示多个按钮的点击事件对话框

Question

在我的ASP.NET MVC 4应用程序中，我有一个包含一些嵌入部分视图的视图，每个视图都有一个ID为HelpButtonID_1、HelpButtonID _2…的帮助按钮，。。。。此外，每个视图都有一个div标记，其中包含与该部分视图相关的文本。这些div标签的ID是divID_1、divID_2，。。。在所有视图使用的_Layout.cshtml视图中，我定义了jquery对话框如下，这样当用户单击特定局部视图的帮助按钮（比如View1）时，对话框将以divID_1中的文本打开，如果单击局部视图2的帮助按钮，则对话框将以来自divID_2等的文本打开。

<script>
  $(function () {
     $('[id^="divID_"]').dialog({
     width: 400,
     autoOpen: false
    });
    $('[id^="HelpButtonID_"]').click(function () {
      $('[id^="divID_"]').dialog("open");
      return false;
    });
 });
</script>

但上述做法并不奏效。另一方面，如果我在一个局部视图上有一个ID为HelpButtonID的帮助按钮和ID为divID的div标记，那么下面的操作就可以了。

<script>
  $(function () {
      $("#divID").dialog({
         width: 400,
         autoOpen: false
    });
    $('#HelpButtonID').click(function () {
       $("#divID").dialog("open");
       return false;
    });
  });
</script>

请帮忙。谢谢

Answer 1

我会为按钮和对话框使用一个公共类，并使用data-属性来指定对话框div:

<button class="help-button" data-dialog-id="#HelpDialog6">?</button>

---

<div id="HelpDialog6" class="help-dialog">Some content</div>

---

$(function () {
      $(".help-dialog").dialog({
         width: 400,
         autoOpen: false
    });
    $('.help-button').click(function () {
       $($(this).data('dialog-id')).dialog("open");
       return false;
    });
  });