编写jQuery添加/删除类的更好方法

时间：2018-10-04 15:22:24

标签： javascript jquery css

我不是JS和jQuery的专家，但是我想提高自己的知识。

我编写了适合我的代码，但是我敢肯定它可以做得更好。您能帮我解释一下如何综合吗？ 通过按钮激活URL，其中一些图像消失，而另一些图像出现，这只是一张幻灯片。

<script>
  $(".green").click(function(e){
      window.location = "#img_green";
      $('#piz_green').css("display", "block");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".army").click(function(e){
      window.location = "#img_army";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "block");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".red").click(function(e){
      window.location = "#img_red";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "block");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".white").click(function(e){
      window.location = "#img_white";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "block");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "none");
  });
  $(".blue").click(function(e){
      window.location = "#img_blue";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "block");
      $('#piz_black').css("display", "none");
  });
  $(".black").click(function(e){
      window.location = "#img_black";
      $('#piz_green').css("display", "none");
      $('#piz_army').css("display", "none");
      $('#piz_red').css("display", "none");
      $('#piz_white').css("display", "none");
      $('#piz_blue').css("display", "none");
      $('#piz_black').css("display", "block");
  });
</script>

谢谢。

9 个答案:

答案 0 :(得分：9)

为改进此代码，我们还可以对html进行一些改进。我们可以添加一些类来标识元素和控件，然后-可能只需要6行js

请尝试这个

$(".your-button-class").click(function(e) {
  const color = e.target.dataset.color;
  window.location = "#img_" + color;
  $('.your-div-class').css("display", "none");
  $('div[data-color=' + color + ']').css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button class="your-button-class" data-color="green">green</button>
  <button class="your-button-class" data-color="army">army</button>
  <button class="your-button-class" data-color="red">red</button>
  <button class="your-button-class" data-color="white">white</button>
  <button class="your-button-class" data-color="blue">blue</button>
  <button class="your-button-class" data-color="black">black</button>
</div>

<div class="your-div-class" data-color="green">green</div>
<div class="your-div-class" data-color="army">army</div>
<div class="your-div-class" data-color="red">red</div>
<div class="your-div-class" data-color="white">white</div>
<div class="your-div-class" data-color="blue">blue</div>
<div class="your-div-class" data-color="black">black</div>

答案 1 :(得分：5)

这里不需要JavaScript，因为您可以按照以下基本CSS进行操作。

使用带有锚点的正确链接：

<a href="#img_green">green</a>
<!-- repeat for other colors -->
<a href="#img_black">black</a>

然后按如下所示使用:target pseudo-class：

#piz_green,
#piz_army,
#piz_red,
#piz_white,
#piz_blue,
#piz_black {
  display: none;
}
#piz_green:target,
#piz_army:target,
#piz_red:target,
#piz_white:target,
#piz_blue:target,
#piz_black:target {
  display: block;
}

通过添加父元素，您可以将其简化如下：

#container > * {
  display: none;
}
#container > *:target {
  display: block;
}

答案 2 :(得分：1)

在这种情况下，我强烈建议使用公共类时，可以始终在,的选择器中使用逗号show()/hide()分隔符，以简化代码（有点）：

$(".green").click(function(e) {
  window.location = "#img_green";
  $('#piz_green').show();
  $('#piz_army,#piz_red,#piz_white,#piz_blue,#piz_black').hide();
});

$(".army").click(function(e) {
  window.location = "#img_army";
  $('#piz_army').show();
  $('#piz_green,#piz_red,#piz_white,#piz_blue,#piz_black').hide();
});

$(".red").click(function(e) {
  window.location = "#img_red";
  $('#piz_red').show();
  $('#piz_green,#piz_army,#piz_white,#piz_blue,#piz_black').hide();
});

$(".white").click(function(e) {
  window.location = "#img_white";
  $('#piz_white').show();
  $('#piz_green,#piz_army,#piz_red,#piz_blue,#piz_black').hide();
});

$(".blue").click(function(e) {
  window.location = "#img_blue";
  $('#piz_blue').show();
  $('#piz_green,#piz_army,#piz_red,#piz_white,#piz_black').hide();
});

$(".black").click(function(e) {
  window.location = "#img_black";
  $('#piz_black').show();
  $('#piz_green,#piz_army,#piz_red,#piz_white,#piz_blue').hide();
});

无需更改HTML结构的另一个建议： 

$(".green, .army, .red, .white, .blue, .black").click(function(e) {
  var color = $(this).prop('class');

  window.location = "#img_" + color;
  $('[id^=piz_]').hide();
  $('#piz_' + color).show();
});

答案 3 :(得分：1)

元素上的数据属性和公共类将使您的生活更轻松

var slides = $(".slide");  // reference all the slides
$("[data-action").on("click", function(e){ // bind the click
  var btn = $(this);  // button that was clicked
  var color = btn.data("action");  // get the color
  slides.attr("hidden", true); // hide all the slides
  $("#piz_" + color).removeAttr("hidden");  // show the clicked color
  window.location.hash = "img_" + color;  // update the hash
});
[hidden] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-action="green">Green</button>
<button data-action="red">Red</button>
<button data-action="blue">Blue</button>

<div class="slide_wrapper">
  <div class="slide" id="piz_green">green</div>
  <div class="slide" id="piz_red">red</div>
  <div class="slide" id="piz_blue">blue</div>
</div>

答案 4 :(得分：1)

function slideshow(image_id, block_id){
      window.location = image_id;
      $("[id^=piz_]").css("display", "none");
      $(block_id).css("display", "block");
  }

  $(".green").click(function(e){
      slideshow("#img_green", "#piz_green");
  });

答案 5 :(得分：1)

这是我要解决的问题。首先，我将添加一个任意数据属性，在这种情况下为颜色。然后，我将添加所有带有相应data属性的按钮。然后附加到这些按钮的click事件并调用以下代码。

$('[data-action=toggle]').click(function(e){
  $('div[data-color]:not([data-color='  + e.target.dataset.color + '])').hide();
  $('div[data-color=' + e.target.dataset.color + ']').show();
})
a{
  margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-color="green">green</div>
<div data-color="red">red</div>
<div data-color="blue">blue</div>
<div data-color="pink">pink</div>
<div data-color="yellow">yellow</div>

<a href="#" id="green" data-action="toggle" data-color="green">Green</a>
<a href="#" id="green" data-action="toggle" data-color="red">Red</a>
<a href="#" id="green" data-action="toggle" data-color="blue">Blue</a>
<a href="#" id="green" data-action="toggle" data-color="pink">Pink</a>
<a href="#" id="green" data-action="toggle" data-color="yellow">Yellow</a>

答案 6 :(得分：0)

您可以考虑使用属性选择器来一次隐藏所有元素。确保在hide()之前致电show() 

$(".green").click(function(e) {
  window.location = "#img_green";
   $('[id^=piz]').hide();
   $('#piz_green').show();

});

$(".army").click(function(e) {
  window.location = "#img_army";
  $('[id^=piz]').hide();
  $('#piz_army').show();
});

$(".red").click(function(e) {
  window.location = "#img_red";
  $('[id^=piz]').hide();
  $('#piz_red').show();
});

$(".white").click(function(e) {
  window.location = "#img_white";
  $('[id^=piz]').hide();
  $('#piz_white').show();
});

$(".blue").click(function(e) {
  window.location = "#img_blue";
  $('[id^=piz]').hide();
  $('#piz_blue').show();
});

$(".black").click(function(e) {
  window.location = "#img_black";
  $('[id^=piz]').hide();
  $('#piz_black').show();
});

答案 7 :(得分：0)

您可以使用每个按钮将要显示的图像的id存储为自定义数据属性，然后用一行来隐藏所有图像（通过为它们提供一个通用类），并从自定义数据中仅显示其id所需的图像属性。

按钮元素示例：

<button data-slideshow-button="green">Green</button>

幻灯片元素示例：

<div id="piz_green" class="slideshow-image"></div>

然后只需运行如下代码作为点击处理程序即可：

$('[data-slideshow-button]').click(function(e){
  var showId = $(e.currentTarget).data('slideshowButton');
  window.location = '#img_' + showId;
  $('.slideshow-image').hide();
  $('#piz_' + showId).show();
});

答案 8 :(得分：0)

就像您确实在HTML中的所有类上使用piz_一样，您可以在JavaScript中轻松使用它们。例如，如果要隐藏它们，则只需键入： $('[class^=piz_]').hide();。这将隐藏该类以piz_开头的所有元素。

现在我就此作一个简单的例子。请知道，我只是制作了图块和一个重试按钮，以举一个例子。 

$("[class^=piz_]").click(function(){ // Make all div's with the class piz_* clickable
   $('[class^=piz_]').hide(); // Hide all elements
   var classAttr = '.'+$(this).attr("class");  // Get the class from the tile you clicked on
   $(classAttr).show(); // Show all tiles with the same class
});

// This is just to get all tiles back and try it again.
$('.retry').click(function() {
 $('[class^=piz_]').show(); 
});
.piz_green { background:green; } 
.piz_blue { background:blue; } 
.piz_red { background:red; } 
.piz_orange { background:orange; } 

div, button { width:100px; height:100px; }
.retry { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="piz_green"></div>
<div class="piz_blue"></div>
<div class="piz_red"></div>
<div class="piz_orange"></div>
<div class="piz_green"></div>

<button class="retry">
Retry!
</button>

相关问题
最新问题