Question

这是我正在使用的Javascript片段。我想知道是否有办法让它更紧凑。它改变了CSS，但是大多数类具有相同的值（现在实际的js非常长）。

$('#project_planetx').mouseover(function() {
   $('#project_bg_show').css("background-image", "url(images/projects/WeT_PLXT_branding.png)").css("background-size", "cover"); // change css
   $('#projects_header_show').css("color", "transparent");
   $('.projects_headercolom_show').css("color", "transparent");
   $('.blvd_headercolom_show').css("color", "transparent");
   $('.project_b').css("display", "none");  
   $('.project_c').css("display", "none");              
});

$('#project_planetx').mouseleave(function() {
   $('#project_bg_show').css("background", "#FAFAFA").css("background-image", "url(images/projects/Projects_BG_main.png)").css("background-size", "cover");; // change back css as it was
   $('#projects_header_show').css("color", "#000000");
   $('.projects_headercolom_show').css("color", "#000000");
   $('.blvd_headercolom_show').css("color", "#000000");
   $('.project_b').css("display", "block"); 
   $('.project_c').css("display", "block");
});

Answer 1

如果要为它们应用相同的CSS，则可以同时选择不同的元素。使用逗号分隔元素。这是documentation。

$('#projects_header_show,.projects_headercolom_show,.blvd_headercolom_show').css("color", "transparent");
$('.project_b,.project_c').css("display", "none");
//you continue with the rest of your code

Answer 2

我不确定您的HTML strcuture（我将所有元素都视为#project_planetx的子元素）您可以结合使用CSS和jQuery来缩短代码。简单添加你在mouseover / mouseleave上添加/删除的有效条款，如下所示：

$('#project_planetx').mouseover(function() {
  $(this).addClass('active');
});
$('#project_planetx').mouseleave(function() {
  $(this).removeClass('active');
});

/* normal state (on mouse leave)*/

#project_planetx #project_bg_show {
  background-image: url(images/projects/Projects_BG_main.png);
  background-size: cover;
}

#project_planetx #projects_header_show,
#project_planetx .projects_headercolom_show,
#project_planetx .blvd_headercolom_show {
  color: #000;
}

#project_planetx .project_b,
#project_planetx .project_c {
  display: block;
}


/* on mouse over */

#project_planetx.active #project_bg_show {
  background-image: url(images/projects/WeT_PLXT_branding.png);
}

#project_planetx.active #projects_header_show,
#project_planetx.active .projects_headercolom_show,
#project_planetx.active .blvd_headercolom_show {
  color: transparent;
}

#project_planetx.active .project_b,
#project_planetx.active .project_c {
  display: none;
}

Answer 3

您可以使用所有属性和id / classNames创建一个对象。您是否认为这更好取决于您自己。它不是更紧凑，但绝对是干的。

编辑：这不是更干。只是一个绝对的设计选择。一个我更喜欢。

   $('#project_bg_show').css("background-image", "url(images/projects/WeT_PLXT_branding.png)").css("background-size", "cover"); // change css
    $('#projects_header_show').css("color", "transparent");
    $('.projects_headercolom_show').css("color", "transparent");
    $('.blvd_headercolom_show').css("color", "transparent");

const styles = {
  ['#project_bg_show']: {
    attr1: "background-image",
    attr2: "url(images/projects/WeT_PLXT_branding.png)"
  },
  ['#projects_header_show']: {
    attr1: "background-image",
    attr2: "url(images/projects/WeT_PLXT_branding.png)"
  },
  ['.projects_headercolom_show']: {
  attr1: "color"
    attr2: "transparent"
  }
}

for (let domElement of styles) {
  let {attr1, attr2} = styles[domElement]
  $(domElement).css(attr1, attr2)
}

Answer 4

以下是如何使其更紧凑：

$(document).on({
  mouseover: function() {
    $('#project_bg_show').css({
      "background-image": "url(images/projects/WeT_PLXT_branding.png)",
      "background-size": "cover",
    }); // change css
    $('.blvd_headercolom_show, .projects_headercolom_show, #projects_header_show').css("color", "transparent");
    $('.project_b,.project_c').css("display", "none");
  },
  mouseleave: function() {
    $('#project_bg_show').css({
      "background": "#FAFAFA",
      "background-image": "url(images/projects/Projects_BG_main.png)",
      "background-size": "cover"
    }); // change back css as it was
    $('.blvd_headercolom_show, .projects_headercolom_show, #projects_header_show').css("color", "#000000");
    $('.project_c, .project_b').css("display", "block");
  }
}, '#project_planetx');

如何使这个Javascript更紧凑

4 个答案: