在jQuery中使用JavaScript返回值

嘿，夥計們。所以這更多的是關於我不知道JS而不是一個真正的難題。在jQuery中使用JavaScript返回值

我想在JS中編寫一個小函數，我可以從jQuery調用來調整圖像大小。事情是我不知道如何在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。

感謝您的幫助！

來源

2011-01-27 Drew Baker

你可以嘗試返回一個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-27 00:22:57 Jimchao

如果你想一次返回這兩個值，你可以用一個對象字面做...

return { 
    width: new_width, 
    height: new_height 
};

來源

2011-01-27 00:19:27 alex

是啊，這是一個好主意。我將如何訪問jQuery中的？我想是這樣的：調整大小= fit_within_box（A，B，X，Y） resize.width resize.height 是否正確？ – 2011-01-27 00:23:52

`fit_within_box`函數的值也需要在某處捕獲。關於OP代碼中的語法錯誤，'return（1，2，...，n）`只返回`n`，所以OP只會從寫入的函數返回`new_height`。 – jball 2011-01-27 00:24:53

嘿，這是工作的例子，我已經修復了一些小錯誤，例如你對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>

乾杯

來源

2011-01-27 00:34:27

在jQuery中使用JavaScript返回值

回答

相關問題