如何优化此jquery脚本？ 不同的类别和相同的功能
[英]How can I optimize this jquery script? Different classes and same function
问题描述
I have this jquery function but it is too long for me. 
我有这个jquery函数，但是对我来说太长了。 Is there any way to make as one jquery change function. 有什么方法可以使一个jquery change功能。 I need your help. 我需要你的帮助。
$(document).ready(function () {
$('.sub-cat select').change(function () {
if ($('.sub-cat select option:selected').text() == "Other") {
$('.sub-cat .other-category').show();
}
else {
$('.sub-cat .other-category').hide();
}
});
$('.prod-type select').change(function () {
if ($('.prod-type select option:selected').text() == "Other") {
$('.prod-type .other-category').show();
}
else {
$('.prod-type .other-category').hide();
}
});
$('.prod-finnish select').change(function () {
if ($('.prod-finnish select option:selected').text() == "Other") {
$('.prod-finnish .other-category').show();
}
else {
$('.prod-finnish .other-category').hide();
}
});
$('.prod-color select').change(function () {
if ($('.prod-color select option:selected').text() == "Other") {
$('.prod-color .other-category').show();
}
else {
$('.prod-color .other-category').hide();
}
});
$('.prod-included select').change(function () {
if ($('.prod-included select option:selected').text() == "Other") {
$('.prod-included .other-category').show();
}
else {
$('.prod-included .other-category').hide();
}
});
$('.prod-series select').change(function () {
if ($('.prod-series select option:selected').text() == "Other") {
$('.prod-series .other-category').show();
}
else {
$('.prod-series .other-category').hide();
}
});
});
4 个解决方案
解决方案1
2 2017-04-03 05:49:28
Assign a common class ie 'commonClass' to all the parent element ie 'sub-cat, prod-included,...' , then use various DOM traversal methods to target 'other-category' element. 为所有父元素（例如“ sub-cat，prod-included，...”）分配一个通用类（即“ commonClass” ） ，然后使用各种DOM遍历方法将“ other-category”元素作为目标。
Learn to use this , element which initiated the event 学习使用this引发事件的元素
$('.commonClass select').change(function () {
$(this).closest('.commonClass').find('.other-category').toggle($('option:selected', this).text() == "Other");
});
References 参考文献
解决方案2
1 2017-04-03 05:53:16
You can select several elements at once by separating their class selections with a comma. 您可以通过用逗号分隔类别选择来一次选择多个元素。
$('.sub-cat, .prod-type, .prod-finnish, .prod-color, .prod-included, .prod-series').change(function() {
var $this = $(this); // cache this so we don't have to wrap it twice
$this.toggle($this.find('option:selected').text() == "Other"));
});
It's then just a matter of using .toggle() and passing in a boolean; 然后，只需使用.toggle()并传入一个布尔值即可； In our case whether the selected option has "Other" as its text. 在我们的情况下，所选选项的文本是否为“其他”。
This has a really good performance advantage since you only need one event delegate to handle the change event for all the elements in the selector. 这具有非常好的性能优势，因为您只需要一个事件委托即可处理选择器中所有元素的change事件。
解决方案3
1 已采纳 2017-04-03 06:07:05
Please check below code. 请检查以下代码。 On selection of other option 选择其他选项
$(document).ready(function () { $('select').change(function () { if($(this).find('option:selected').text() == "other"){ $(this).next().show(); } else{ $(this).next().hide(); } }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </head> <body> <div class="sub-cat"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> <option value="other">other</option> </select> <div class="other-category" style="display: none;"> <p>sub-cat other-category</p> </div> </div> <div class="prod-type"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> <option value="other">other</option> </select> <div class="other-category" style="display: none;"> <p>prod-type other-category</p> </div> </div> </body> </html>
show below div . 显示在div以下。
解决方案4
0 2017-04-03 05:53:52
You can utilize data-attributes to help you out. 您可以利用数据属性来帮助您。 I didnt test out this code, but I think something like this could possibly work. 我没有测试这段代码，但我认为类似的事情可能可行。 Update your HTML to be something like this 更新您的HTML像这样
<select data-target="sub-cat"></select>
<div class="other-category" data-target="sub-cat"></div>
Followed by this abbreviated jquery code... 紧接着是这个简短的jquery代码...
$(document).ready(function () {
$('select').change(function() {
var target = $(this).data('target'),
isSelected = $(that).find('option:selected').text() == "Other";
$(this).find('.other-category[data-target="'+target+'"]').toggleClass(isSelected);
})
});
By storing the attributes in a data-attribute, you can easily access that in your javascript code, targeting specific elements much more easily. 通过将属性存储在数据属性中，您可以轻松地在javascript代码中访问属性，从而更轻松地定位特定元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.