JQuery, нажмите, чтобы увеличить изображение, затем нажмите Agian, чтобы вернуться к предыдущей ширине

0 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="https://i0.wp.com/www.thekitchenwhisperer.net/wp-content/uploads/2014/04/BelgianWaffles8.jpg" width="100" class="image" />

<script>
  $(document).ready(function() {
    $('.image').click(function() {
      $(this).css('width', '100%'); // original width is 500px 
    });
  });
</script>

Как добавить несколько кодов, чтобы я снова щелкнул по нему, чтобы он вернулся к предыдущей ширине (100 пикселей)?

Теги:
function
click

3 ответа

3
Лучший ответ

Как это?

 $(document).ready(function(){
        $('.image').click(function(){
             $(this).css('width', function(_ , cur){
                  return cur === '100px' ? '100%' : '100px'
            });  
        });
    });

скрипка

Поделиться
  • 0
    Да, отлично, спасибо, не могли бы вы объяснить мне эти строки ниже функции (_, cur) {return cur === '100px'? '100%': '100px'
  • 1
    Css принимает аргумент функции, второй аргумент которого является текущим значением этого свойства, поэтому используйте его и переключайте значения, чтобы вернуть новое значение
Показать ещё 6 комментариев
0

Это работает отлично. Но в случае, если у меня есть сетка из различных изображений, есть ли способ заблокировать это только для одного изображения? Я имел в виду, что если развернутое изображение и я нажимаю другое, первое возвращается к исходному размеру.

Благодарю.

Поделиться
-1

Прежде всего, я бы заменил атрибут width для вашего img на CSS. Затем вы можете просто удалить назначенный inline-css (который добавляет jQuery), вызвав

$(this).css('width', '');
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню