jQuery單擊按鈕設置圖像大小

Question

我正在上載圖像，並且我可以選擇以英寸和厘米為單位的圖像大小。 當用戶選擇英寸時，其div顯示屏上的按鈕尺寸為15 * 12、30 * 20，而當用戶選擇厘米時，div變為38cm * 28cm，78cm * 56cm。 div的點擊是英寸和厘米按鈕。 但是我如何根據所選按鈕設置大小。 我希望當用戶選擇15 * 12時，該圖像在div中具有此尺寸。 這是顯示和隱藏英寸和厘米的div的代碼。

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

Answer 1

解析botton中的內容，然后設置圖像大小-

$("#imageID").attr("width",width);
$("#imageID").attr("height",height);

Answer 2

使用不同的單位（例如英寸和厘米）設置寬度和高度是完全合法的。 所有你要做的是說"3in"為3英寸，或"10cm" 10厘米。 （您可以在CSS和jQuery中執行此操作。）

/* valid CSS */
img {
    width: 3in;
}

// valid jQuery
$("img").width("3in");

這里有一些簡單的HTML和jQuery，以了解如何設置對單擊事件的響應大小。

<img id="myImg" src="path/to/image.jpg" alt="...">
<button data-width="15in" data-height="20in">15 x 20</button>
<button data-width="20in" data-height="30in">20 x 30</button>

// Every time a <button> is clicked, resize the image to the dimensions
// given in the data-width and data-height attributes.
$("button").on("click", function () {
    var $button = $(this);
    $("#myImg").width( $button.data("width") ).height( $button.data("height") );
});