Question

我一直在调整一些隐藏在闭合引导模式中的图像的问题。图像彼此叠加，因此它们必须是绝对定位的。我想纠正图像容器的大小，这样当模态打开时，它们看起来并不奇怪。

我有一个快速调整大小的功能，但只有在图像可见时它才会起作用。当用户调整浏览器窗口大小时使用它。使用它意味着用户可以在很短的时间内看到未调整大小的容器。

下面的函数应该只在页面加载时运行一次，并且在所有图像加载完成后（运行正常）。问题在于，由于某种原因，原始模态与克隆的模态一起被删除。如果我从jQuery链中删除.remove()，那么克隆仍然存在，但原始版本仍会被删除。

var cloneCounter = 0;

// Slow resize using jquery becuase
// the images are hidden.
function slowResize( parent, pId ) {
  // height of the largest image
  var largest = 0;

  var newId = "clone-" + cloneCounter + "-";

  // |find the modal that the parent is cloeset to
  // |-clone the modal
  // |--change the id of the clone
  // |--find all elements
  // |---change all the child ids
  // |--insert the clone into the dom
  // |--show the modal
  // |--hide it from view, make dimensions ( position: absolute, display: block, visibility: hidden )
  // |--find all the images related to the parent passed in
  // |---calculate which is the tallest
  // |--hide the clone
  // |--remove the clone

  var original = parent.closest( "div.modal" );
  var clone    = original.clone( true );

  clone
    .attr("id", newId + clone.attr( "id" ) )
    .find("*")
      .each( function( index, element ) {
        if ( element.id !== "" )
          element.id = newId + element.id;
      })
    .end()

    .after( original )
    .modal("show")
    .css({
      "visibility": "hidden",
    })
    .find( "#" + newId + pId ).find( "img" )
      .each( function() {
        largest = ( largest > $( this ).outerHeight() ) ? largest : $( this ).outerHeight();
       })
    .end()

    .modal("hide")
    .remove();

  // apply the style
  parent.css( "height", ( largest + 2 ) );

  ++cloneCounter;
}

调整大小也没有用，但我现在并不太担心。

Answer 1

我在删除原始文件时遇到问题的原因是因为我使用了错误的jQuery方法。 .after将内容插入括号内。我应该一直在使用.insertAfter。

e.g.

$(target).after(contentToBeInserted)

$(contentToBeInserted).insertAfter(target)

因为我在克隆上调用方法，所以我应该使用第二个例子。

这是该功能的固定版本。

var cloneCounter = 0;

// Slow resize using jquery becuase
// the images are hidden.
function slowResize( parent, pId ) {
  // height of the largest image
  var largest = 0;

  var newId = "clone-" + cloneCounter + "-";

  // |find the modal that the parent is cloeset to
  // |-clone the modal
  // |--change the id of the clone
  // |--find all elements
  // |---change all the child ids
  // |--insert the clone into the dom
  // |--hide it from view, make dimensions available ( position: absolute, display: block )
  // |--find all the images related to the parent passed in
  // |---calculate which is the tallest
  // |--remove the clone

  var original = parent.closest( "div.modal" );
  var clone    = original.clone( true );

  clone
    .attr("id", newId + clone.attr( "id" ) )
    .find("*")
      .each( function( index, element ) {
        if ( element.id !== "" )
          element.id = newId + element.id;
      })
    .end()

    .insertAfter( original )
    .css({
      "display": "block",
      "left": "-9999px",
    })
    .find( "#" + newId + pId ).find( "img" )
      .each( function() {
        var c = this;

        if ( c.offsetParent !== null )
          largest = ( largest > c.height ) ? largest : c.height;
      })
    .end()

  clone.remove();

  // apply the style
  parent.css( "height", ( largest + 2 ) );

  ++cloneCounter;
}

jquery克隆和之后

1 个答案: