jQuery代码不能按我的意愿工作

Question

对标题感到抱歉我不知道该怎么设置它。如果您能想到这个问题的标题，请告诉我或编辑，谢谢。现在回答这个问题。我写了一些jQuery代码，根据点击的链接显示不同的框。当你再次点击链接时，所有的框都会重新出现，这正是我想要的。我的问题是，当我点击link1然后链接2然后返回到link1所有图像重新出现。我不希望这种情况发生。我只想出现link1的方框。所有框只应在开始时和单击链接两次时显示。

$(".links").click(function(){
  var current_link = $(this);
  var images = $(".images")
  
  $(images).removeClass('hide');
  $(images).removeClass('show');
  
  var current = $(this).data("cat");
  $(images).addClass('hide');
  $('.'+current).addClass('show');
  
   $(current_link).click(function(){
      $(images).toggleClass('hide');
   });
});

ul{
  list-style-type: none; 
}

ul li{
  display: inline-block;
}

ul li a{
  font-size: 20px;
  padding: 10px;
  background-color: yellow;
}

.change{
  background-color: red;
}

.print{
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

.portfolio{
  height: 100px;
  width: 100px;
  background-color: red;
  display: inline-block;
}

.web{
  height: 100px;
  width: 100px;
  background-color: orange;
  display: inline-block;
}

.hide{
  display: none;
}

.show{
  display: inline-block;
}

<ul>
  <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
  <li><a class="links" data-cat="portfolio" href="#">link2</a></li>
  <li><a class="links" data-cat="web" href="#">link3</a></li>
</ul>

<div class="print images">
  
</div>

<div class="portfolio images">
  
</div>

<div class="web images">
  
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

Answer 1

您可以通过添加类 .active 在链接上添加条件，并检查该链接是否具有该类，并仅使用 .hide 类< strong> .images ，无需使用 .show

类

请参阅代码段：

$(".links").click(function() {

  var current_link = $(this);
  var images = $(".images");
  var links = $(".links");
  var current = $(this).data("cat");

  if (current_link.hasClass('active')) {
  
    links.removeClass('active');
    images.removeClass('hide');

  } else {
  
    links.removeClass('active');
    current_link.addClass('active');
    images.addClass('hide');
    $('.' + current).removeClass('hide');
  }

});

ul {
  list-style-type: none;
}

ul li,
.images {
  display: inline-block;
}

ul li a {
  font-size: 20px;
  padding: 10px;
  background-color: yellow;
}

.change {
  background-color: red;
}

.images {
  height: 100px;
  width: 100px;
}

.print {
  background-color: blue;
}

.portfolio {
  background-color: red;
}

.web {
  background-color: orange;
}

.hide {
  display: none;
}

<ul>
  <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
  <li><a class="links" data-cat="portfolio" href="#">link2</a></li>
  <li><a class="links" data-cat="web" href="#">link3</a></li>
</ul>

<div class="print images"></div>

<div class="portfolio images"></div>

<div class="web images"></div>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

Answer 2

您需要在全局变量中维护当前链接，或者像我在窗口对象中完成它一样，试试这个：

＆＃13;

＆＃13;

$(".links").click(function(){
  var current_link = $(this);
  var images = $(".images")
  var current = $(this).data("cat");
  
  if(current == window.currentImage){
      $(images).removeClass('hide');
    $(images).removeClass('show');
    window.currentImage = null;
    return; // don't do anything id current link is clicked
  }
  
  $(images).addClass('hide');
  $('.'+current).removeClass('hide');
  $('.'+current).addClass('show');
  window.currentImage = current;
});

＆＃13;

ul{
  list-style-type: none; 
}

ul li{
  display: inline-block;
}

ul li a{
  font-size: 20px;
  padding: 10px;
  background-color: yellow;
}

.change{
  background-color: red;
}

.print{
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

.portfolio{
  height: 100px;
  width: 100px;
  background-color: red;
  display: inline-block;
}

.web{
  height: 100px;
  width: 100px;
  background-color: orange;
  display: inline-block;
}

.show{
  display: inline-block;
}

.hide{
  display: none;
}

＆＃13;

<ul>
  <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
  <li><a class="links" data-cat="portfolio" href="#">link2</a></li>
  <li><a class="links" data-cat="web" href="#">link3</a></li>
</ul>

<div class="print images">
  
</div>

<div class="portfolio images">
  
</div>

<div class="web images">
  
</div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 3

这可能是一个更清洁的解决方案。我也在使用条件：）

＆＃13;

＆＃13;

var current = null;
var images = $('.images');

$(".links").click(function(){
  if(current === $(this).data("cat")){
    images.removeClass('hide');
    current = null;
  } else {
    current = $(this).data("cat");
    $(images).addClass('hide');
    $('.'+current).removeClass('hide');
  }
});

＆＃13;

ul{
  list-style-type: none; 
}

ul li{
  display: inline-block;
}

ul li a{
  font-size: 20px;
  padding: 10px;
  background-color: yellow;
}

.change{
  background-color: red;
}

.print{
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

.portfolio{
  height: 100px;
  width: 100px;
  background-color: red;
  display: inline-block;
}

.web{
  height: 100px;
  width: 100px;
  background-color: orange;
  display: inline-block;
}

.hide{
  display: none;
}

.show{
  display: inline-block;
}

＆＃13;

<ul>
  <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
  <li><a class="links" data-cat="portfolio" href="#">link2</a></li>
  <li><a class="links" data-cat="web" href="#">link3</a></li>
</ul>

<div class="print images">

</div>

<div class="portfolio images">

</div>

<div class="web images">

</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;