Question

大家好，我是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);重复了两次。有没有办法写一次？

非常感谢您将宝贵的时间花在我的问题上。

感谢您的帮助！

＆＃13;

$.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();

＆＃13;

.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)}

＆＃13;

<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"/>

＆＃13;

Answer 1

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

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

编写简单的JQuery插件

1 个答案: