1

やあみんな。ですから、これは私がJSを知らないということであり、本当に難しい質問であるということではありません。

jQueryから呼び出して画像のサイズを変更できる小さな関数をJSで作成しようとしています。問題は、JS関数の実行後に値をjQueryに戻す方法がわからないことです。これが私がこれまでに持っているものです：

$('a').click(function() {
    var slideshowHeight = $(this).closest('.stage').css('height')
    var slideshowWidth = $(this).closest('.stage').css('width')
    var newImageHeight = $(this).attr('data-height')
    var newImageWidth = $(this).attr('data-width')

    fit_within_box(slideshowWidth, slideshowHeight, newImageWidth, newImageHeight);

    $(this).children('img').css('width',new_width);
    $(this).children('img').css('width',new_height);
}

function fit_within_box(box_width, box_height, width, height)
{
    var new_width = width
    var new_height = height
    var aspect_ratio = parseInt(width) / parseInt(height)

    if (new_width > box_width)
    {
        new_width = box_width
        new_height = int(new_width / aspect_ratio)
    }

    if (new_height > box_height)
    {
        new_height = box_height
        new_width = int(new_height * aspect_ratio)
    }
    return (new_width, new_height)
}

ご覧のとおり、私はいくつかの値を入力して、new_widthとnew_heightを取得しようとしています。

助けてくれてありがとう！

4

3 に答える 3

1

両方の値を一度に返したい場合は、オブジェクト リテラルを使用して実行できます...

return {
   width: new_width,
   height: new_height
};
于 2011-01-27T00:19:27.240 に答える
0

次のようなJSONオブジェクトを返すことができます。

return {
    new_height:height,
    new_width:width
};

そしてそれをjquery関数で使用します：

var fit_img = fit_within_box(...);
...
$(this).children('img').css('height',fit_img.new_height);
于 2011-01-27T00:22:57.973 に答える
0

ねえ、これが実際の例です。幅を2回使用したなど、いくつかの小さな間違いを修正しましたchildren('img');

jQuery:

$(function(){
    $('a').click(function() {
        var slideshowHeight=$(this).closest('.stage').height();
        var slideshowWidth=$(this).closest('.stage').width();
        var newImageHeight=$(this).attr('data-height');
        var newImageWidth=$(this).attr('data-width');
        var size=fit_within_box(slideshowWidth,slideshowHeight,newImageWidth,newImageHeight);
        $(this).children('img').css({'width':size[0],'height':size[1]});
    });

    function fit_within_box(box_width,box_height,new_width,new_height){
        var aspect_ratio=new_width/new_height;
        if(new_width>box_width){
            new_width=box_width;
            new_height=Math.round(new_width/aspect_ratio);
        }
        if(new_height>box_height){
            new_height=box_height;
            new_width=Math.round(new_height*aspect_ratio);
        }
        return [new_width,new_height];
    }
});

壁紙付きの HTML:

<div class="stage" style="width:200px;height:200px;">
<a href="#" data-width="1280" data-height="1024"><img src="wallpaper_1280x1024.jpg" /></a>
</div>

乾杯

G.

于 2011-01-27T00:34:27.263 に答える