将单击按钮的下一个元素发送到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");
  });
});

这是仅前两个按钮的html代码，因为cod太长：

<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的内容。

这样可以做到：

$(document).ready(function() {
  var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
  var newDiv = $(dialog);
  newDiv.dialog({
    autoOpen: false,
    hide: "puff",
    show: "slide",
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog("close");
      }
    }
  });

  $(".form-group").on('click', ".img1", function() {
  var me = $(this);
    newDiv.find('.dialogcontent').html(me.next('.collapse').html())
    newDiv.dialog("open");
  });
});

实际示例： https ： //jsfiddle.net/89pyhsuj/

Answer 2

您的问题是，您正在从下一个div创建对话框，但是您试图在CURRENT 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");
    });
});