鼠標事件的Javascript函數

Question

我正在嘗試更改以下代碼，以便不必單擊並按住鏈接的圖像將其放大（從150變為300），可以單擊一次以使圖像變大，然后再次單擊以使它變大。圖像縮小。 我必須使用頁面上的多個圖像來執行此操作。 （請預先警告，我不太了解jquery，對javascript有非常基本的了解。但是我正在學習！）

function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(150) + 'px';}'

<img src="picture.jpg" onmousedown="Down(this)" onmouseup="Up(this)" />

Answer 1

您可以切換課程。

首先，您應該將一個類設置為針對特定元素，並且設置width屬性為首選方法：

<img class="imgToggling" src="picture.jpg" width="150">

現在，一組相關的CSS big類：

.big {
    width: 300px;
}

然后單擊，切換此類，使用jQuery綁定事件（優先於內聯腳本）：

$(function () { //shorthand for document ready handler
    $('.imgToggling').on('click', function () {
        $(this).toggleClass('big');
    });
});

-演示-

如果您希望獲得某種過渡，請添加此CSS規則，例如：

img.imgToggling {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

-演示與過渡-

Answer 2

我必須使用頁面上的多個圖像來執行此操作。

然后，您可以使用jQuery （因為標記了jQuery）執行此操作：

$('img').on('click', function(){
     var thisWidth=$(this).width(),
         setWidth = thisWidth >= 300 ? 150 : 300;
     $(this).width(setWidth); 
});

_{假定圖像不是動態生成的，也不是在dom中用ajax放置的。}