Question

我正在尝试制作一个简单的交叉渐变滑块，但这次是从json文件中检索并动态添加到容器中的图像。

我可以轻松地获取包含json文件中所有信息的所有图片，但是一旦我不得不选择它们，我就不能。就像他们不在那里一样。这不是我第一次动态添加html元素。我经常使用.append()或.prepend()，我可以轻松找到他们的孩子。

所以我有一个div，我动态加载一些图像。我想再次拿起它们（这次不是来自json文件，而是来自dom）所以我可以用它们制作一个滑块插件。

$.fn.slider = function(options) {
  var picstore, $fig,
  def   = {
    json: undefined,
    dataName: 'jsonslider'
  },
  cfg   = $.extend( true, def, options ),
  store = cfg.json,
  dataN = cfg.dataName, 
  $wrap = $( this ),
  $next = $wrap.next();

$.getJSON( store, function( data ) {
  picstore = data.pictures;

  for ( i = 0; i < picstore.length; i++ ) {
    $wrap.append( '<figure data-' + dataN +'="' + i + '"><img src="' + picstore[i].url + '" alt="' + picstore[i].alt + '"/></figure>' );
};

我尝试了一切！

$fig = $wrap.children()不起作用

$fig = $( '[data-' + dataN + '="0"]' )不起作用

你建议我做什么？

demo

github index.html raw file

github js raw file

github json raw file

Answer 1

这是解决方案。

$.getJSON( store, function( data ) {
  var arr = $.map(data, function(el){ return el; });

  for ( i = 0; i < arr.length; i++ ) {
    $wrap.append($('<figure data-' + dataN +'="' + i + '"><img src="' + arr[i].url + '" alt="' + arr[i].alt + '"/></figure>'));
  };

  var figs = $wrap.children();
  figs.first().addClass( 'slider-active' );
});

您无法在函数外部访问json动态对象。

无法选择附加

1 个答案: