jquery
  • lambda
  • 2011-09-09 1 views 1 likes 
    1

    すべてのIMGの幅と高さのコピーをoriginalWidthとoriginalHeight属性に保存します。後でそれらを使って、すべてのIMGの新しいサイズをoriginalWidth * k、originalHeight * kとして設定できますか?私はラムダなどを使うべきだと思っていますが、私はJSの初心者なので、表現を書く方法はありません。jQuery:すべてのIMGのサイズを掛ける

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

    答えて

    1

    私は(jsFiddle example here作業)このような何かをするだろう:

    // 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); 
        }); 
    } 
    
    2

    を使用し、画像ごとに個別に行う必要があります。

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

    は、ペッカ、ありがとうございました。しかし、「何をするのか」はどのように見えますか? a => a.Width * = k? – noober

    +1

    @noober '$(this).width()'を使って関数内の各画像の幅にアクセスすることができます(高さは同じです) –

    3

    あなたは

    $("img").each(function() { 
        $(this).data({ 
         "width": $(this).width(), 
         "height": $(this).height() 
        }); 
    }); 
    
    1
    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); 
    
    }); 
    
    2

    data()方法を使用してそれらを格納することができます$.dataを使用して考えられていましたか?カスタムが本当に必要な場合は、HTML5 data-*カスタム属性も読み込みます。

    次にあなたは、JavaでLILEいくつかのutil funcを書くことができます:あなたがしたいすべてがあなたのカスタム属性を取得して、あなたのイメージのための新しいサイズを設定するためにそれらを使用している場合

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

    を:

    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); 
    
    関連する問題