Question

*此问题已更新。

我有一组框，当点击时会打开一个名为#expander的div。在我的代码中，在打开#expander之后，如果单击了另一个框，我会检查单击的新框是否与单击的最后一个框相同。如果是相同的，我会关闭#expander，否则我会暂时关闭它然后再打开它。

使用此jsfiddle

进行了演示

这是stackoverflow中的相同代码：

＆＃13;

$(document).on('click', '.box', function(e) {
  if (!$('#expander').hasClass('active')) {
    $('#expander').addClass('active');
    $('.basic-info').css('border-left', '1px solid black');
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
  	console.log('activeBox = ' + activeBox);
    return;
  }

  if ($('#expander').hasClass('active')) {
    $('#expander').removeClass('active');
    $('.basic-info').css('border-left', '0px solid black');
    if ($(this).attr('id') !== activeBox) {
      setTimeout(function() {
        $('#expander').addClass('active');
      }, 256);
    }
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
  	console.log('activeBox = ' + activeBox);
    return;
  }
});

＆＃13;

#expander{
  height: 100%;
  width: 0%;
  float: left;
  visibility: hidden;
  overflow: hidden;
  background-color: grey;
  transition: .75s ease-out;
}
#expander.active{
  height: 100%;
  width: 50%;
  z-index: 1;
  visibility: visible;
}
#closer{
  padding: 4px;
  margin: 0px;
  background-color: #707070;
  color: white;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}
#closer:hover{
  background-color: #606060;
  font-size: 2em;
  padding: 0px;
}
.box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: grey;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.basic-info{
  padding: 8px 16px;
  color: white;
  background-color: #47a;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  transition: .5s ease-out;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expander">
  <div id="closer" title="Close"><span>&times</span></div>
  <div id="main"></div>
</div>
<div class="basic-info">
  <div id="box1" class="box">1</div>
  <div id="box2" class="box">2</div>
  <div id="box3" class="box">3</div>
</div>

＆＃13;

以上代码有效（虽然它看起来并不完全符合我的最终布局）但是它没有做到这一点：$('.basic-info').css('border-left', '1px solid black');在第一次打开一个框之后点击（当它打开#expander

时

我意识到这不起作用的原因是JS代码首先添加了类和样式，但接下来的if语句删除了类和样式。另外，我必须两次粘贴以下代码：

$('#main').text(activeBox);
console.log('activeBox = ' + activeBox);
return;

有没有人知道更好的方法来布局我的if语句，以便代码不冲突？另外，有没有办法不需要使用return; s？

P.S。有没有人有一个好的if statement 技巧教程的链接，以便我可以在将来学习这些东西？

谢谢。

更新

我已根据当前答案更新了代码，并将JS更改为：

$(document).on('click', '.box', function(e) {
  if ($('#expander').hasClass('active')) {
    $('#expander').removeClass('active');
    if ($(this).attr('id') !== activeBox) {
      setTimeout(function() {
        $('#expander').addClass('active');
      }, 256);
      activeBox = $(this).attr('id');
      console.log('activeBox = ' + activeBox);
      return;
    }
    $('.basic-info').css('border-left', '0px solid white');
    return;
  }
  $('#expander').addClass('active');
  $('.basic-info').css('border-left', '1px solid white');
  activeBox = $(this).attr('id');
  console.log('activeBox = ' + activeBox);
}

（它做同样的事情，只是以不同的方式布局）。我现在想弄清楚的就是我如何在没有任何return;的情况下写出这个，所以我不必写activeBox = $(this).attr('id'); console.log('activeBox = ' + activeBox);两次（除非这些事情不可能/不可避免的）

谢谢。

Answer 1

$(document).on('click', '.box', function(e) {
  if (!$('#expander').hasClass('active')) {
    $('#expander').addClass('active');
    $('.basic-info').css('border-left', '1px solid black');
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
    console.log('activeBox = ' + activeBox);
  } else if ($('#expander').hasClass('active')) {
    $('#expander').removeClass('active');
    $('.basic-info').css('border-left', '0px solid black');
    if ($(this).attr('id') !== activeBox) {
      setTimeout(function() {
        $('#expander').addClass('active');
      }, 256);
    }
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
    console.log('activeBox = ' + activeBox);
  }
});

Answer 2

对于清理部分并删除重复数据，您可以将您的js代码转换为此

<强>更新

jsFiddle

// target the #expander 
var Expander = $('#expander'),
  activeBox = '';

$(document).on('click', '.box', function(e) {
  //toggleClass means if #expander hasClass, remove it, if it
  //doesn't have the class, add it.
  Expander.toggleClass('active');
  // same for .basic info, we use toggle class, instead of
  // CSS hardcoded, thus we can toggle
  $('.basic-info').toggleClass('black-border-left');

  if ($(this).attr('id') !== activeBox) {
    Expander.removeClass('active');
    // to get rid of the delay for when one .box div is clicked for the first time
    // when activeBox = ''.
    if(activeBox !== ''){
      setTimeout(function() {
        Expander.addClass('active');
      }, 500);
    }else{
      Expander.addClass('active');
    }
    activeBox = $(this).attr('id');
  }
  $('#main').text(activeBox);
  console.log('activeBox = ' + activeBox);
});

JS / jQuery - 如果语句没有＆＃34;返回＆＃34;

2 个答案: