запускать javascript-код для каждого div на странице, индивидуально

59
6

У меня есть некоторые динамические данные, извлеченные из БД на моем веб-сайте.

Содержимое будет содержать несколько изображений, которые в конечном итоге будут выводиться, например

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

Все источники изображения являются внешним URL-адресом и могут быть любого размера (соотношение не размер файла)

То, что я хочу сделать, - когда страница загружается, она проверяет все div с классом buildimage и затем проверяет их размер. Если он превышает значение 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");
}
})
});

Работает, но устанавливает все изображения на странице в один класс. Я понимаю, почему, но я просто не знаю, как заставить эту функцию "пропустить" каждое изображение отдельно и изменить свои классы.

Теги изображений преобразуются из 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");

Или что-то типа того? Не уверен, что это самый простой способ.

Craig

спросил(а) 2014-01-03T03:52:00+04:00 6 лет, 10 месяцев назад
1
Решение
115

Я заметил, что вы используете 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");
}
});
});

Вот пример приведенного выше кода: http://jsfiddle.net/dragulceo/Lqm6a/1/

ответил(а) 2014-01-03T04:05:00+04:00 6 лет, 10 месяцев назад
94

Просто используйте функцию "каждый" JQuery

$.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");
}
});

ответил(а) 2014-01-03T03:59:00+04:00 6 лет, 10 месяцев назад
82

Вы можете использовать .addClass() обратного вызова .addClass() которая выполняется один раз для каждого выбранного элемента:

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

ответил(а) 2014-01-03T04:04:00+04:00 6 лет, 10 месяцев назад
41

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");
}

});
});

ответил(а) 2014-01-03T04:09:00+04:00 6 лет, 10 месяцев назад
42

Это идеальное место для каждой функции 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");
}
});
});

ответил(а) 2014-01-03T04:02:00+04:00 6 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема