JavaScript下拉函数重构
JavaScript Dropdown Function Refactor
嘿,伙计们,我有3个下拉菜单,每个都有自己的id
,我这样做是因为我将下拉菜单的值设置为我选择的,我想区分它们。
下拉菜单的html是:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="makein">
<li>bmw</li>
<li>mercedes</li>
<li>mazda</li>
<li>ford</li>
<li>lada</li>
<li>audi</li>
<li>skoda</li>
<li>fiat</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="yearin">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="levelin">
<li>luxury</li>
<li>ordinary</li>
</ul>
</div>
我有3个JavaScript函数来根据每个部分的id设置下拉列表的值,如下所示:
$(function () {
$("#makein li").click(function(){
$("#make").html($(this).text()+' <span class="caret"></span>');
});
});
$(function () {
$("#yearin li").click(function(){
$("#year").html($(this).text()+' <span class="caret"></span>');
});
});
$(function () {
$("#levelin li").click(function(){
$("#level").html($(this).text()+' <span class="caret"></span>');
});
});
我真的不喜欢有3个不同的JavaScript函数的方法。我想知道你们是否知道如何实现这三个函数
你可以这样做:
$(function() {
$("li").click(function() {
$(this).parent().siblings('button').first().html($(this).text() + ' <span class="caret"></span>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="makein">
<li>bmw</li>
<li>mercedes</li>
<li>mazda</li>
<li>ford</li>
<li>lada</li>
<li>audi</li>
<li>skoda</li>
<li>fiat</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="yearin">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="levelin">
<li>luxury</li>
<li>ordinary</li>
</ul>
</div>
这段代码应该可以工作了:
$(function() {
$('.dropdown-menu li').click(function() {
$(this).closest('dropdown').find('button').html($(this).text()+' <span class="caret"></span>')
})
})
相关文章:
- jQuery:重构为函数
- 重构查找函数
- 将ECMAScript 6析构函数赋值(ES2015)重构为旧版本的javascript
- Javascript重构通常称为函数
- 将多个jQuery点击函数重构为一个函数
- 渲染重构会导致未定义的函数
- 如何将.show()更改为.thoggle()而不复制函数中的项(如何重构)
- ES2015中从函数到类的重构
- Javascript:重构循环之外的函数
- 重构作为属性从 es5 传递到 es6 的函数
- 将 PHP 函数的 3 小位重构为 JS - 数组,如果为空且匹配 url
- 重构以避免 setTimeout 函数
- 重构JavaScript原型构造函数中的重复代码
- 重构 Jquery 函数以使其可重用
- 重构C函数以查找O(n)中二进制树的直径到JavaScript
- 如何使用Chai/Sinon重构jasmine.any()函数
- jQuery重构了函数
- 为什么可以't我在封闭函数之外重构这个匿名函数
- 如何进行重构"提取函数“;在Javascript中
- 重构 JavaScript 函数