javascript - JS/jQuery - 如果语句没有 "return"

Question

*此问题已更新。

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

这是用这个 jsfiddle 证明的

这是相同的代码，在 stackoverflow 中:

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

#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;
}

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

上面的代码有效(虽然它看起来并不完全像我最终布局中的样子) 但是它不执行此操作:$('.basic-info') .css('border-left', '1px solid black'); 第一次点击框后(当它打开 #expander

我意识到这不起作用的原因是 JS 代码首先添加类和样式，然后下一个 if 语句删除类和样式。另外，我必须将以下代码粘贴两次:

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

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

附言有没有人有一个很好的if 语句 tricks 教程的链接，以便我以后可以学习这些东西？

谢谢。

---

更新:

我已经根据当前答案更新了代码，并将 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

对于清理部分和去除重复数据，你可以将你的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);
});