javascript - 将单击的按钮的下一个元素发送到 jQuery UI 对话框

Question

尝试为元素设置动画后，使用此脚本单击按钮时:

$(document).ready(function()
{
  $("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
    {
    // $(this).css('border', "solid 2px red");
    // var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
    // $(divs).siblings().slideToggle();

      $(this).next().slideToggle();
      $(this).siblings().slideToggle();
   });
});

我得到了一些不需要的动画结果。所以我决定，为什么我不使用 jQuery UI 插件将结果发送到对话框 bix 中，而不是对单击的按钮的下一个元素进行动画处理。所以我尝试了以下方法:

<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
  $("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {

    $(this).next().dialog({
      autoOpen: false,
      hide: "puff",
      show: "slide",
      width: 800,
      modal: true
    });
    //$(this).dialog("open");
  });
});

这里只是前 2 个按钮的 html 代码，因为代码太长了:

<div class="form-group col-md-12">
  <input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
  <div id="div_one" class="collapse">3rd Molar:
    <?php echo $resTeeth['one'] ?>
  </div>
  <input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
  <div id="div_two" class="collapse">
    <?php echo $resTeeth['two'] ?>
  </div>

所以我遇到了这个错误:

jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

如何修复此错误，是否可以使用 jQuery UI 将 next() div 元素发送到 dialog 框中，或者我应该为每个 div 指定 id，并为每个 div 创建一个对话框脚本吗？

Answer 1

您的问题是，您正在从下一个 div 创建对话框，但您正在尝试打开当前 div 上的对话框。您可以很容易地解决这个问题:

$(document).ready(function() {
    $("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
        var dialog = $(this).next();
        dialog.dialog({
          autoOpen: false,
          hide: "puff",
          show: "slide",
          width: 800,
          modal: true
        });
        dialog.dialog("open");
    });
});