Question

对此问题感到困惑，问了一个类似的问题，但不是这个问题。

我有以下功能，

$('#colorbox').each(function() {
  var imgs = $('img');
  imgs.each(function() {
    if ($(this).hasClass('cboxPhoto')) {
      var img = $(this);
      if (img.width() < 500 && img.height() > 1000) {
        img.addClass('relative');
      } else {
        img.removeClass('relative');
      }
    }
  });
});

如果<img>具有'cboxPhoto'类，我基本上会说div #colorbox，然后运行each（）函数将{relative>类添加到<img> if图像宽度大于X，高度大于X.当HTML已经静态放置时，此功能正常工作。但是，这些图像是动态生成的。

这些图像不会手动放入HTML中，这些图像是通过上传模块上传的。这是下面的HTML标记，当DOM创建'colorbox'loads时 - 'colorbox'创建'cboxLoadedContent'的id并生成该图像。

<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 13px; left: 0px; position: absolute; width: 11169px; height: 1536px;">
  <div id="cboxWrapper" style="height: 1536px; width: 11169px;">
    <div>
      <div id="cboxTopLeft" style="float: left;"></div>
      <div id="cboxTopCenter" style="float: left; width: 11169px;"></div>
      <div id="cboxTopRight" style="float: left;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxMiddleLeft" style="float: left; height: 1536px;"></div>
      <div id="cboxContent" style="float: left; width: 11169px; height: 1536px;">
        <div id="cboxLoadedContent" style="width: 9999px; overflow: auto; height: 768px;">
<img class="cboxPhoto" src="img/designations/3.jpg" style="cursor: pointer; width: 370px; height: 3453px; float: none;">
          <img class="cboxPhoto" src="img/designations/1.jpg" style="cursor: pointer; width: 250px; height: 250px; float: none;">
          <img class="cboxPhoto" src="img/designations/4.jpg" style="cursor: pointer; width: 300px; height: 1922px; float: none;">
        </div>
        <div id="cboxTitle" style="float: left; display: block;"></div>
        <div id="cboxCurrent" style="float: left; display: block;">image 3 of 6</div>
        <button type="button" id="cboxPrevious" style="display: block;">previous</button>
        <button type="button" id="cboxNext" style="display: block;">next</button>
        <button id="cboxSlideshow" style="display: none;"></button>
        <div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
        <div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
        <button type="button" id="cboxClose">close</button>
      </div>
      <div id="cboxMiddleRight" style="float: left; height: 1536px;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxBottomLeft" style="float: left;"></div>
      <div id="cboxBottomCenter" style="float: left; width: 11169px;"></div>
      <div id="cboxBottomRight" style="float: left;"></div>
    </div>
  </div>
  <div style="position: absolute; width: 9999px; visibility: hidden; max-width: none; display: none;"></div>
</div>

问题：

正如我上面提到的，这些图像不会被手动放置在由'colorbox'生成的页面上 - 这是在加载DOM之后创建的？我尝试了一些不同的.load和.ready，但是没有用？是否有一些回调函数可以设置为它在检测到图像创建后添加类，然后运行我之前的每个函数？

Answer 1

$(document).ready(function () {
    $(".preview").colorbox({
        rel: 'preview',
        onComplete: function(){
        $('#colorbox').each(function() {
          var imgs = $('img');
          imgs.each(function() {
            if ($(this).hasClass('cboxPhoto')) {
              var img = $(this);
              if (img.width() < 500 && img.height() > 1000) {
                img.addClass('relative');
              } 
            else {
                img.removeClass('relative');
              }
            }
          });
    });
        }
    });
});

需要广告onComplete功能，然后运行我的处理功能。

http://jsfiddle.net/UFtrK/522/

为什么colorbox不会将我的课程添加到轮播图像中？

1 个答案: