鼠标事件的Javascript函数

Question

I am trying to change the following code so that instead of having to click-and-hold the linked image to make it bigger (150 into 300), I could click it once to make the image bigger, and click it again to make the image return to smaller. I have to do this with multiple images on the page. (Be forewarned, I do not really understand jquery and have a very basic understanding of javascript. But I'm learning!)

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

You could toggle a class.

Firstly, you should set a class to target specific element(s) and setting width attribute is preferred method:

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

Now, set relevant CSS for a big class:

.big {
    width: 300px;
}

Then on click, toggle this class, binding event using jQuery (preferred over inline scripting):

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

-DEMO-

If you wish to get some kind of transition, add this CSS rule eg:

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;
}

-DEMO with transition-

Answer 2

I have to do this with multiple images on the page.

Then you can do this with jQuery (as jQuery is tagged) :

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

_{assumed if images are not dynamically generated or placed with ajax in the dom.}