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'

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

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");
    });
});

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

2 个答案: