Функция 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');
    });
});

-DEMO-

Если вы хотите получить какой-то переход, добавьте это правило 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); 
});

_{Предполагается, если изображения не генерируются динамически или не помещаются с помощью AJAX в DOM.}