Запустить действие «щелчок» на изображении с помощью текстовой ссылки

Question

Я не мог найти прямой ответ здесь для моего запроса, так что, надеюсь, один из удивительных людей здесь может помочь! :)

Я использую MaterializeCSS. У них есть класс под названием «materialboxed», который вы можете прикрепить к элементу, если хотите его увеличить. (Отлично подходит для изображений, как в этом случае)

Что мне нужно сделать, это найти способ иметь текстовую ссылку (нажмите, чтобы увеличить) вызвать событие «щелчок» на изображении, надеясь активировать класс и увеличивая изображение.

Текстовая ссылка:<a href="">Click to enlarge</a> Изображение:<img src="yourimage" class="materialboxed" />

** MaterializeCSS еще находится в зачаточном состоянии, и еще хорошо не документированы, так что никаких ответов нет. И нет, к сожалению, с материализацией не обойтись.

Заранее благодарен!

Answer 1

Вы можете сделать это, используя обычный JS. Вам нужно добавить идентификатор изображения и затем вызвать событие клика на нем.

<a href="" onclick="document.getElementById('img').click()">Click to enlarge</a> 
<img src="yourimage" class="materialboxed" id="img" /> 

Answer 2

<a href='javascript:enlarge()'>Click to enlarge</a> 
<img src="image.png" id='image' height="200px" class="materialboxed" /> 
<script> 
    function enlarge() { 
     document.getElementById('image').height = 400; 
    } 
</script> 

Answer 3

Никогда не работал с MaterializeCSS, но от того, что я вижу, образы, у которых имеется materialboxed класс настроил .click() событие.

Вы можете позвонить по телефону click() событие на изображение, когда кто-то нажал кнопку «Нажмите, чтобы увеличить».

Пример в JQuery:

$("a").click(function(){   //Your <a href="">Click to Enlarge</a> tag 
    $(".materialboxed").click(); //Your <img class='materialboxed'> tag 
});