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

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

$(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();
   });
});

我得到了一些不想要的结果。因此，我决定，为什么不使用

jqueryui

plugin将结果发送到dialog-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");
  });
});

---

如何修复此错误，是否可以使用

jqueryui

将

next（）

div元素发送到

dialog

框中，或者我应该为每个div指定id，并为每个div创建一个对话框脚本？

我假设您希望对话框包含下一个（以下）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");
  });
});

$（文档）.ready（函数（）{
var dialog='
me
；
var newDiv=$（对话框）；
newDiv.dialog({
自动打开：错误，
隐藏：“吹气”，
放映：“幻灯片”，
莫代尔：是的，
按钮：{
好的：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“.form group”）。在（'click'，.img1'，function（）上{
var me=$（此）；
newDiv.find（'.dialogcontent'）.html（me.next（'.collapse'）.html（））
新建分区对话框（“打开”）；
});
});

---

动作示例：

我假设您希望对话框包含下一个（以下）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");
  });
});

$（文档）.ready（函数（）{
var dialog='
me
；
var newDiv=$（对话框）；
newDiv.dialog({
自动打开：错误，
隐藏：“吹气”，
放映：“幻灯片”，
莫代尔：是的，
按钮：{
好的：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“.form group”）。在（'click'，.img1'，function（）上{
var me=$（此）；
newDiv.find（'.dialogcontent'）.html（me.next（'.collapse'）.html（））
新建分区对话框（“打开”）；
});
});

---

动作示例：

您的问题是，您正在从下一个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");
    });
});

---

您的问题是，您正在从下一个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");
    });
});