主页 / 问题 / 1484279
Accepted
steep
Asked:2023-01-07 18:41:53 +0000 UTC2023-01-07 18:41:53 +0000 UTC

如何通过单独的按钮激活图库，而不是通过单击图片？

  • 772

连接的材料盒画廊https://materializecss.com/media.html

如何从一个单独的按钮激活它，而不是通过点击图片？

$('.materialboxed').materialbox();
.btn {
    position: absolute;
    top: 10%;
    background: #fff;
    left: 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<img class="materialboxed" width="650" src="https://materializecss.com/images/sample-1.jpg">
<a href="#" class="btn">увеличить</a>

jquery

1 个回答

  1. Best Answer
    $('.btn').on('click', () => {
  $('.materialboxed').materialbox('open')
})

    选择任何所需的元素并调用函数

    或者这个选项，如果你想将特定的照片绑定到特定的按钮。对于代码，我很抱歉，我是通过电话写的，我认为它可以更漂亮，但更清晰

    索引.html 

        <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <img class="materialboxed1" width="650" src="https://materializecss.com/images/sample-1.jpg">

<img class="materialboxed2" width="650" src="https://materializecss.com/images/sample-1.jpg">

    <a href="#" class="btn btn1">увеличить</a>
<a href="#" class="btn btn2">увеличить</a>

    /////脚本.js

    let elem1 = document.querySelector('.materialboxed1');
let instance1 = M.Materialbox.init(elem1);


let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', () =>{
  instance1.open()
})


let elem2 = document.querySelector('.materialboxed2');
let instance2 = M.Materialbox.init(elem2);

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', () =>{
  instance2.open()
})
    • 1

相关问题