Question

我在索引文件中使用以下div ID代码在特定数组中设置jQuery对话框时遇到问题：

<div id="dialog"></div>

现在从一个数组生成一个对话框，该数组放在一个子文件夹的javascript文件中，代码如下：

"pins": [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/down.png"
  }
];


var pins = "<div id=dialog ></div>";
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("src").on("click", function() {
    $("#dialog").dialog("open");
  });
});

我想在image-pin url上使用onclick函数初始化3个对话框，将名称值作为框的标题加载，将状态值作为文本加载到框中。

我已经尝试了一百种不能带来成功的方法。

Answer 1

逻辑是，为数组中的每个项生成img，在其上绑定click事件。当用户点击它时，您会将img中的#dialog src替换为点击图片的src。最后，打开对话框。

如果我理解正确，那应该是这样的：

＆＃13;

var pins = [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633276/pexels-photo-633276.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633501/pexels-photo-633501.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633548/pexels-photo-633548.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  }
];

$.each(pins, function(i, pin) {
  $('body').append('<img src="' + pin.src + '" class="src" />');
});

$(function() {
  var dialog = $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("img").on("click", function() {
    dialog.find('img').attr('src', $(this).attr('src'));
    dialog.dialog("open");
  });
});

＆＃13;

.src {
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin: 10px;
}

#dialog img {
  max-width: 100%;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog">
  <img />
</div>

＆＃13;

无法在数组中循环jQuery对话框

1 个答案: