gpt4 book ai didi

javascript - 编写简单的 JQuery 插件

转载 作者:行者123 更新时间:2023-12-03 02:44:17 26 4
gpt4 key购买 nike

大家好,我是 JQuery 新手,所以我想知道是否可以避免代码中的重复。我这里有一个非常简单的插件:

  $.fn.preview = function() {
$(this).on("click", function() {
$("body").append("<div class='c'><img></div>");
$(".c img").css("max-height", $(window).height() - 20);
$(".c img").css("max-width", $(window).width() - 20);
$(".c img").attr("src", $(this).attr("src"));
$(".c").css("display", "flex");
$(window).on("click resize", function(e) {
if ($(e.target).is(".c")) {
$(".c").remove();
}
$(".c img").css({
"max-height": $(window).height() - 20,
"max-width": $(window).width() - 20
});
});
});
}
$("img").preview();

但是这里的代码$(".c img").css("max-height",$(window).height()-20); $(".c img").css("max-width",$(window).width()-20); 重复两次。有没有办法一次性写完?

非常感谢您花费宝贵的时间来解决我的问题。

感谢您的帮助!

$.fn.preview=function(){
$(this).on("click",function(){
$("body").append("<div class='c'><img></div>");
$(".c img").css("max-height",$(window).height()-20);
$(".c img").css("max-width",$(window).width()-20);
$(".c img").attr("src",$(this).attr("src"));
$(".c").css("display","flex");
$(window).on("click resize",function(e){
if($(e.target).is(".c")){
$(".c").remove();
}
$(".c img").css({"max-height":$(window).height()-20,"max-width":$(window).width()-20});
});
});
}
$("img").preview();
.c{display:none;justify-content:center;align-items:center;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.8)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://wallpaperbrowse.com/media/images/Wallpaper-4K.jpg" width="200"/>

最佳答案

您可以通过将对象传递为 .css() 来声明多个 CSS 规则。函数参数:

$(".c img").css({
"max-height": $(window).height()-20,
"max-width": $(window).width()-20
});

关于javascript - 编写简单的 JQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48166168/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com