[前端开发] layer.photos 点击预览图在弹出前,能不能做一个判断?

一直以来做移动端开发,最近自己搞了个小玩意儿,试着写了下 web 端的东西,一脸懵逼

需求是一个类似于相册的东西,网格展示图片的缩略图,正常状态下,点击缩略图会弹出大图,在编辑状态下,点击图片不弹出,而是 checkbox 选中 /取消。

大致代码如下

<div id="layer-photos-demo" class="layer-photos-demo"> <th:block th:each="image,pro : ${image}"> <div class="item_container"> <img th:class="image" th:layer-pid="${image.objectId}" th:layer-src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/cover/' + ${image.coverFileName}}" th:src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/thumbnail/' + ${image.thumbnailFileName}}" th:alt="${image.originalFileName}" th:onclick="showImage([[${pro}]],[[${image}]])"> <input id="check-box" class="check-box" type="checkbox" name="checkbox" lay-skin="primary" title="写作" style="display: none"> </div> </th:block>
</div>
 let editable = false; function showImage(pro, image) { console.log(editable); if (editable) { let checkBox = document.getElementsByClassName("check-box") $(checkBox[pro.index]).prop("checked", !$(checkBox[pro.index]).prop("checked"));//正确选中 let form = layui.form; form.render("checkbox"); } else { // 调用示例 layer.photos({ photos: '#layer-photos-demo' , anim: 5 //0-6 的选择,指定弹出图片动画类型,默认随机(请注意,3.0 之前的版本用 shift 参数) }); } }

现在遇到的情况是,即使是在编辑情况下( editable = true )的时候,点击缩略图,依旧会弹出大图,有没有大神给讲讲到底是啥原因啊。

或者说类似功能,有没有其他 UI 框架推荐?感谢感谢

发表评论

您的电子邮箱地址不会被公开。