javascript - jQuery 帮助 - 最小化代码(隐藏/显示 div)并将 "form"重置为默认状态

Question

大家好，这是一个很难在一个阶段中提出的问题，所以请原谅以上内容。

我正在进行“标签搜索”，用户从标签列表中一次选择三个标签快速查看此演示(因为它更容易理解)http://codepen.io/naniio/pen/pJNexm

一旦选择了所有 3 个标签，用户点击搜索并在我的数据库中搜索相关的标签内容。

我遇到的问题是 jQuery:

$('.term-1').on('change', function() {
  // Gets radio value and adds into tagbox 1
  $('#tagbox-1').html(this.checked ? this.value : '');
  // Add class to draw users attention to new tag box (2)
  $( "#tagbox-2" ).addClass( "highlight" );
  // hides tags for tagbox 1
  $( ".term-1-tags" ).addClass( "hide-tags" );
  // Shows Tags for tagbox 2
   $(".term-2-tags").removeClass("state");
});


$('.term-2').on('change', function() {
  // gets radio value and adds into tagbox 2
  $('#tagbox-2').html(this.checked ? this.value : '');
  // Add class to draw users attention to new tag box (3)
  $("#tagbox-3" ).addClass( "highlight");
  // hides tags for tagbox 2
  $(".term-2-tags").addClass( "hide-tags");
  // Shows Tags for tagbox 3
  $(".term-3-tags").removeClass("state");
});


$('.term-3').on('change', function() {
  // gets radio value and adds into tagbox 3
  $('#tagbox-3').html(this.checked ? this.value : '');
  // hides tags for tagbox 3
   $(".term-3-tags").addClass("hide-tags");
});


$('#reset').click(function() {
  // reset to default
});

我完成它的方式(隐藏和显示 div)似乎很臃肿，我相信一定有更好的方法吗？我也不知道重置按钮将如何工作(将标签搜索返回到它的页面加载状态，我不想刷新页面来执行此操作)

任何帮助都会很棒!

Answer 1

在这种情况下，只需一个常见事件就足够了。 我们可以使用类本身的 Item 索引和一个简短的逻辑来删除代码的冗余。

注意:在 stackoverflow 的 fiddle 中，重置按钮将不起作用，因为 fiddle 嵌入在 iframe 中。但它将以正常形式工作。

$('.term-1,.term-2,.term-3').on('change', function() {
  
  var index = $(this).attr('class').split('-')[1];
  var nextIndex =parseInt(index)+1;
  
  // Gets radio value and adds into tagbox 1
  $('#tagbox-'+index).html(this.checked ? this.value : '');
  // hides tags for tagbox 1
  $( ".term-"+index+"-tags" ).addClass( "hide-tags" );
  
  if($(".term-"+index)){
  // Add class to draw users attention to new tag box (2)
  $( "#tagbox-"+nextIndex ).addClass( "highlight" );
    // Shows Tags for tagbox 2
   $(".term-"+nextIndex+"-tags").removeClass("state");
  }
});

$('#reset').click(function() {
     $('form')[0].reset();
});

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
  font-size: 18px;
  line-height: 20px;
  font-family: 'Open Sans', sans-serif;
}

p {
  line-height: 22px;
  color: #111111;
}

.container {
  width: 500px;
  padding: 15px;
  margin: 50px auto;
}

.tagbox {
  border: 1px solid #F2F2F2;
  display: inline-block;
  padding: 15px;
  cursor: pointer;
  margin:15px 15px 15px 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}


.select_box {
  box-sizing: border-box;
  margin: 30px 0;

}

ul.options {
  list-style-type: none;
  font-size: 0px;
  border-style: solid;
  border-width: 1px 1px 1px 4px;
  margin: 0;
  padding: 15px;

}

ul.options li{
  display: inline;
}

ul.options li label {
 
  font-size: 18px;
  padding: 5px;
  background: #FFFFFF;
 
}

ul.options li label:hover {
  /*background: #0000EE;*/
}

label {
  cursor: pointer;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.highlight{
  display:inline-block;
  border:1px solid #F2F2F2;
  border-left-style: solid;
  border-left-width: 3px;
}

.ta{border-left-color: #E13632;}
.tb{border-left-color: #4CB849;}
.tc{border-left-color: #E89A02;}

.hide-tags, .state{
  display:none;
}

button{
  margin:15px 0;
  border:0;
  padding:10px 30px;
  border-radius:5px;
  font-size:16px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<form action="">

<span id="tagbox-1" class="tagbox ta noselect highlight">Select 1</span>
<span id="tagbox-2" class="tagbox tb noselect">Select 1a</span>
<span id="tagbox-3" class="tagbox tc noselect">Select 1b</span>
    
  <ul id="" class="options term-1-tags ta">
    <li><label for="item-1" class="">tag 1</label></li>  
    <li><label for="item-2" class="">tag 2</label></li>
    <li><label for="item-3" class="">tag 3</label></li>
    <li><label for="item-4" class="">tag 4</label></li>
  </ul> 

  <input type="radio" id="item-1" class="term-1" name="item-1" value="tag1" hidden>
  <input type="radio" id="item-2" class="term-1" name="item-1" value="tag2" hidden>
  <input type="radio" id="item-3" class="term-1" name="item-1" value="tag3" hidden>
  <input type="radio" id="item-4" class="term-1" name="item-1" value="tag4" hidden>

<!-- end -->

  <ul id="" class="options term-2-tags state tb">
    <li><label for="tag1a" class="">tag 1a</label></li>
    <li><label for="tag2a" class="">tag 2a</label></li>
    <li><label for="tag3a" class="">tag 3a</label></li>
    <li><label for="tag4a" class="">tag 4a</label></li>
  </ul> 
 
  <input type="radio" id="tag1a" class="term-2" name="item-2" value="tag1a" hidden>
  <input type="radio" id="tag2a" class="term-2" name="item-2" value="tag2a" hidden>
  <input type="radio" id="tag3a" class="term-2" name="item-2" value="tag3a" hidden>
  <input type="radio" id="tag4a" class="term-2" name="item-2" value="tag4a" hidden>

<!-- end -->

    <ul id="" class="options term-3-tags state tc">
    <li><label for="tag1b" class="">tag1b</label></li>
    <li><label for="tag2b" class="">tag2b</label></li>
    <li><label for="tag3b" class="">tag3b</label></li>
    <li><label for="tag4b" class="">tag4b</label></li>
  </ul> 

  <input type="radio" id="tag1b" class="term-3" name="item-3" value="tag1b" hidden>
  <input type="radio" id="tag2b" class="term-3" name="item-3" value="tag2b" hidden>
  <input type="radio" id="tag3b" class="term-3" name="item-3" value="tag3b" hidden>
  <input type="radio" id="tag4b" class="term-3" name="item-3" value="tag4b" hidden>

<!-- end -->
 <br>
  <button id="search" type="submit">Search</button>
  <button id="reset">Reset</button>
  
  </form>    
</div>