patternjavascriptMinor
Optimize jQuery selectors code
Viewed 0 times
codejqueryoptimizeselectors
Problem
I have this fiddle http://jsfiddle.net/L7zuT/ where I'm working on a small part of a big event program. The functionality is ok, the part of the problem would be the large JavaScript lines needed with the full event program. Is there any way to implement it with DRY (don't repeat yourself) or a better approach for a simpler way?
CSS
JS
```
$(document).ready(function(){
$("input[name='date_main01']").click(function() {
var test = $(this).val();
$("input[name='date_sub01']").prop('checked', false);
$("input[name='date_sub02']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for*='date_sub']").css("background", "none");
$("label[for='date_main"+test+"']").css("background-color", "yellow");
});
$("input[name='date_sub01']").click(function() {
var test = $(this).val();
$("input[name$='date_main01']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for='date_s
13:00-14:30
18.AAL Solution Deployment Seminar
9. Results of the AALIANCE Network: Roadmap and more
7. From actimetry to ADL ,in the framework of remote medical monitoring of elderly from living labs to the nursing home
8. Interoperability APIs and LivingLabs for AAL
10. Large scale deployment of AAL solutions based on Open Platform: Challenge and perspectives
14:30-16:00
1. User Forum and workshop for exergames in AAL
16:00-17.30
19.Deployment event - matchmaking session
CSS
tr {
height: 1px;
}
td{
height: 100%;
}
label{
display: block;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
label:hover {
cursor:pointer;
}JS
```
$(document).ready(function(){
$("input[name='date_main01']").click(function() {
var test = $(this).val();
$("input[name='date_sub01']").prop('checked', false);
$("input[name='date_sub02']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for*='date_sub']").css("background", "none");
$("label[for='date_main"+test+"']").css("background-color", "yellow");
});
$("input[name='date_sub01']").click(function() {
var test = $(this).val();
$("input[name$='date_main01']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for='date_s
Solution
$("input[name='date_sub01']").prop('checked', false);
$("input[name='date_sub02']").prop('checked', false);Can be turned into:
$("input[name='date_sub01'], input[name='date_sub02']").prop('checked', false);Also if you assign the selectors to a variable your code will be much faster:
var sub_01 = $("input[name='date_sub01']")You never need to use the method .val().
If you do:
var test = this.value;You will get the same results without accessing jQuery.
Since you are using background:none alot, you can keep it in an object:
noneBackground: {"background":"none"}and pass it as an argument
$("label[for*='date_main']").css(noneBackground);Code Snippets
$("input[name='date_sub01']").prop('checked', false);
$("input[name='date_sub02']").prop('checked', false);$("input[name='date_sub01'], input[name='date_sub02']").prop('checked', false);var sub_01 = $("input[name='date_sub01']")var test = this.value;noneBackground: {"background":"none"}Context
StackExchange Code Review Q#54370, answer score: 4
Revisions (0)
No revisions yet.