Question

我从我网站上的数据库中提取了一些动态数据。

内容将包含一些最终会输出的图像，例如

<img class="buildimage" src="IMAGEURL"></img>
<img class="buildimage" src="IMAGEURL2"></img>
<img class="buildimage" src="IMAGEURL3"></img>

所有图片来源都是外部网址，可以是任意尺寸（比例不是文件大小）

我想要做的是，当页面加载时，它会检查所有具有buildimage类的div，然后检查它们的大小。如果它高于X金额，它会改变类，如果不是它的另一个类。

此

$(document).ready(function () {
    var box = $(".blogtest"),
    img = box.find("img.buildimage");
    if (img.width() > 701) {
        $("img.buildimage").attr("class", "buildimage-large");
    } else if (img.width() < 700) {
        $("img.buildimage").attr("class", "buildimage-small");
    }
    })
});

Works，但它将页面上的所有图像设置为同一个类。我理解为什么，但我不知道如何使这个功能分别“运行”每个图像并改变他们的类。

图像标签从BB转换为html：

$text = str_replace("[img]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/img]", "'>", "$text");

是否更容易/可能创建一个输出类的函数？然后把它放在标签内。例如。

$text = str_replace("[img]", "<img class='<script>getImageClass()<.script>' src='", "$text");

或类似的东西？最简单的方法是不确定。

克雷格

Answer 1

只需使用JQuery "each" function

即可

$.each(box.find("img.buildimage"), function(i, img){
    img = $(img);
    if (img.width() > 701) {
        img.attr("class", "buildimage-large");
    } else if (img.width() < 700) {
        img.attr("class", "buildimage-small");
    }
});

Answer 2

您可以使用.addClass()回调函数，该函数对每个选定的元素执行一次：

box.find("img.buildimage").addClass(function() {
   return $(this).width() > 701 
          ? "buildimage-large" 
          : "buildimage-small";
});

Answer 3

这是jQuery each功能的理想之地。

$(document).ready(function() {
  $(".blogtest").find("img.buildimage").each(function(index, img) {
    if (img.width() > 701) {
      img.addClass("buildimage-large");
    } else if (img.width() < 700) {
      img.addClass("buildimage-small");
    }
  });
});

Answer 4

我注意到你使用jQuery。在这种情况下，您应该使用jQuery中的each方法。

$(document).ready(function () {
    var box = $(".blogtest");
    box.find("img.buildimage").each(function() {
       var img = $(this), width = img.width();
       if (width >= 700) {
          img.addClass("buildimage-large");
       } else if (width < 700) {
          img.addClass("buildimage-small");
       }
    });
});

以上是上述代码的示例：http://jsfiddle.net/dragulceo/Lqm6a/1/

Answer 5

jQuery有一个.each()方法很有用。编辑rtcherry的答案：

var imageWidthThreshold = 700;

$(document).ready(function() {
  // can combine into one selector statement
  $(".blogtest img.buildimage").each(function(index, img) {

    var image = $(img),
       // get the value and save so as to save time (1 vs 2 invocations)
       imageWidth = image.width();

    if (imageWidth >= imageWidthThreshold ) {
      image.addClass("buildimage-large");
    } else if (imageWidth < imageWidthThreshold ) {
      image.addClass("buildimage-small");
    }

  });
});

分别为页面上的每个div运行javascript代码

5 个答案: