分别为页面上的每个div运行javascript代码
我在我的网站上从数据库中提取了一些动态数据 内容将有许多最终将被输出的图像,例如分别为页面上的每个div运行javascript代码,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我在我的网站上从数据库中提取了一些动态数据 内容将有许多最终将被输出的图像,例如 <img class="buildimage" src="IMAGEURL"></img> <img class="buildimage" src="IMAGEURL2"></img> <img class="buildimage" src="IMAGEURL3"></img> 所有图像源都是外部URL,可以是任何大小比,而不是文件大小 我想
<img class="buildimage" src="IMAGEURL"></img>
<img class="buildimage" src="IMAGEURL2"></img>
<img class="buildimage" src="IMAGEURL3"></img>
所有图像源都是外部URL,可以是任何大小比,而不是文件大小
我想做的是,当页面加载时,它用buildimage类检查所有div,然后检查它们的大小。如果它高于X数量,它将更改类别,如果不是它的另一个类别
这个
工作正常,但它将页面上的所有图像设置为同一类。我明白为什么,但我只是不知道如何让这个函数分别“运行”每个图像并更改它们的类
图像标记通过以下方式从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");
或者类似的?不确定最简单的解决方法
克雷格只要使用
只要使用
这是jQuery函数的最佳位置
$(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");
}
});
});
这是jQuery函数的最佳位置
$(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");
}
});
});
您可以使用回调函数,该函数对每个选定元素执行一次:
box.find("img.buildimage").addClass(function() {
return $(this).width() > 701
? "buildimage-large"
: "buildimage-small";
});
您可以使用回调函数,该函数对每个选定元素执行一次:
box.find("img.buildimage").addClass(function() {
return $(this).width() > 701
? "buildimage-large"
: "buildimage-small";
});
我注意到您使用jQuery。在这种情况下,应该使用jQuery中的方法
$(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");
}
});
});
下面是上述代码的一个示例:我注意到您使用jQuery。在这种情况下,应该使用jQuery中的方法
$(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");
}
});
});
下面是上述代码的一个示例:jQuery有一个非常有用的方法。编辑的答案:
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");
}
});
});
jQuery有一个非常有用的方法。编辑的答案:
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");
}
});
});
我想这里有一个错误我想这里有一个错误谢谢你的回复,虽然没有答案似乎是有效的,我已经在这里做了jsfiddle,所以你可以看到你是否检查了我添加的链接?您必须在结果面板中使用Inspect元素来选择图像。你会注意到,这些类现在已经开始工作了,有一个错误丢失了一个括号,我的错误进一步抛出了一些错误!非常感谢你的帮助!其他答案是错误的,因为每个回调函数中的第二个参数不是jQuery对象,而是HtmleElement。@tavi不是所有答案,请参阅BlackSheep对更专业方法的使用感谢您的回复,虽然没有答案,但我在这里创建了JSFIDLE,以便您可以看到您是否检查了我添加的链接?您必须在结果面板中使用Inspect元素来选择图像。你会注意到,这些类现在已经开始工作了,有一个错误丢失了一个括号,我的错误进一步抛出了一些错误!非常感谢你的帮助!其他答案是错误的,因为每个回调函数中的第二个参数不是jQuery对象,而是HtmleElement。@tavi不是所有答案,请参阅BlackSheep对没有.width方法的DOM元素对象调用.width方法的更专门的方法的用法。使用width属性或创建jQuery对象。您正在对没有.width方法的DOM元素对象调用.width方法。使用width属性或创建jQuery对象。