jQuery: умножить размер каждого IMG

Question

Я хочу сохранить копии каждой ширины и высоты IMG в атрибутах originalWidth и originalHeight.Как я могу использовать их позже, чтобы установить новый размер каждого IMG как originalWidth * k, originalHeight * k?Я думаю, что я должен использовать лямбды или что-то подобное, но не знаю, как написать выражение, так как я новичок в JS.

$("//img[@attrName='value']").style = ???? ;

Answer 1

Вы можете хранить их, используя data() метод

$("img").each(function() {
    $(this).data({
        "width": $(this).width(),
        "height": $(this).height()
    });
});

Answer 2

Рассматривали ли вы использование $. Data ? Или, если вам действительно нужен пользовательский интерфейс, он даже читает HTML5 data-* пользовательские атрибуты.

Тогда вы можете написать несколько утилит func в java, lile:

function imgResize($img, k){
    var w = $img.data('originalWidth'),
        h = $img.data('originalHeight'); 
    $img.width(w*k).height(h*k);
}

Answer 3

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

$("img[attrName='value']").each(function() { ... do stuff ....  });

Answer 4

Я бы сделал что-то вроде этого (рабочий пример jsFiddle здесь ):

// To store the height and width of each image as data:
$('img').each(function() {
    $elem = $(this);
    $elem.data({
        'origHeight': $elem.height(),
        'origWidth': $elem.width()
    });
});

// To set the size of each image based on a multiplier "new_size":
function resize_images(new_size) {
    $('img').each(function() {
        $elem = $(this);
        $elem.height($elem.data('origHeight') * new_size);
        $elem.width ($elem.data('origWidth' ) * new_size);
    });
}

Answer 5

Если все, что вы хотите сделать, это получить ваши собственные атрибуты и использовать их для установки нового размера для вашего изображения, то:

var k = 2; //double the size of the image
var origW = parseInt($("img").attr("originalWidth"));
var origH = parseInt($("img").attr("originalHeight"));

$("img").css("width", origW*k);
$("img").css("height", origH*k);
// or
$("img").attr("width",origW*k);
$("img").attr("height",origH*k);

Answer 6

var multiply_by = 2; // example

$("img[attrName='value']").each(function() { 

    // set multiplied width and height
    $(this).width($(this).width() * multiply_by) 
           .height($(this).height() * multiply_by);

});