大家好，这是一个可怕的问题，所以请原谅上面的问题。
我正在做一个"标签搜索"，用户从标签列表中选择三个标签，一次一个，快速查看这个演示(因为它更容易理解)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)似乎臃肿，我相信一定有更好的方法?我也不知道重置按钮是如何工作的(返回标签搜索到它的页面加载状态，我不想刷新页面来做)
任何帮助将是伟大的!
在这种情况下，只需一个常见事件就足够了。我们可以从类本身使用Item的索引和一个简短的逻辑来删除代码的冗余。
注意:这里在stackoverflow的小提琴，重置按钮不会工作，因为小提琴是嵌入在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>使用自定义data-*属性，您可以将三个更改事件处理程序减少到一个更改事件处理程序
<input data-current="1" id="item-1" class="term-1" name="item-1" value="tag1>
$('[data-current]').on('change', function() {
var currentId = parseInt($(this).attr('data-current'));
var siblingId = currentId + 1;
// Gets radio value and adds into tagbox 1
$("#tagbox-" + currentId).html(this.checked ? this.value : '');
// hides tags for tagbox 1
$(".term-" + currentId + "-tags").addClass("hide-tags");
if (currentId != 3) {
// Add class to draw users attention to new tag box (2)
$("#tagbox-" + siblingId).addClass("highlight");
// Shows Tags for tagbox 2
$(".term-" + siblingId + "-tags").removeClass("state");
}
});
对于from reset，只需执行
$('#reset').click(function() {
$('form')[0].reset();
});