通过文本 link 在图像上触发 "click" 操作

Question

我无法在这里找到我的询问的直接答案，所以希望这里的一位很棒的人可以提供帮助！ :)

我正在使用 MaterializeCSS。他们有一个名为 "materialboxed" 的 class，如果你想放大它，你可以附加到一个元素上。（非常适合图像，如本例）

我需要尝试做的是找到一种方法让文本 link（点击放大）在图像上触发 "click" 事件，希望能激活 class并放大图像。

文本 link: <a href="">Click to enlarge</a> 图片： <img src="yourimage" class="materialboxed" />

** MaterializeCSS 仍处于起步阶段，还没有很好的文档记录，所以那里没有答案。不，不幸的是，使用 Materialise 是没有办法的。

提前致谢！

Answer 1

您可以使用普通的 JS 来完成此操作。您需要为图片添加一个id，然后调用它的点击事件。

<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 class 的图像设置了 .click() 事件。

因此，当有人单击 "Click to enlarge" 文本时，您可以在图像上调用 click() 事件。

jQuery 中的示例：

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

通过文本 link 在图像上触发 "click" 操作

Trigger a "click" action on an image via text link

javascript

jquery

triggers

external

materialize