stackoom
  简体   繁体   中英

A smarter way to do this JS

 原文  2017-10-01 19:47:57  4   2    javascript/ jquery/ html

Question

I have this code, where the user can click certain checkboxes, and based on their input, they are provided an output with various answers.

I'm pretty new to JavaScript, so I'm just trying to dig in to some cases in order to learn. I'm pretty convinced that there is a smarter way to do this JS code, but I'm not sure how.

I do not wish for you to necessarily perform the correct way to code, but just tell me about the direction in which I should go to do this "right". 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .hide { display: none; //add this property } </style> </head> <body> <div class="decider hide"> <p style="font-size:18px;color:#000;">Hvilken bolig bor du i?</p> <label class="checkbox"> <input id="egetHus" type="checkbox" name="Request" value="Request" /> Eget hus/rækkehus </label> <label class="checkbox"> <input id="lejetHus" type="checkbox" name="Download" value="Download" /> Lejet hus/rækkehus</label> <label class="checkbox"> <input id="lejlighed" type="checkbox" name="test" value="test" /> Ejer-/lejet lejlighed</label> <label class="checkbox"> <input id="fritidshus" type="checkbox" name="test1" value="test1" /> Fritidshus</label> <br /> <p style="font-size:18px;color:#000;">Har du børn?</p> <label class="checkbox"> <input id="hjemmeboendeBoern" type="checkbox" name="Request" value="Request" /> Hjemmeboende børn</label> <label class="checkbox"> <input id="udeboendeBoern" type="checkbox" name="Download" value="Download" /> Udeboende børn</label> <br /> <p style="font-size:18px;color:#000;">Hvilket transportmidler har du?</p> <label class="checkbox"> <input id="bil" type="checkbox" name="Request" value="Request" /> Bil</label> <label class="checkbox"> <input id="motorcykel" type="checkbox" name="Download" value="Download" /> Motorcykel</label> <label class="checkbox"> <input id="knallert" type="checkbox" name="test" value="test" /> Knallert</label> <label class="checkbox"> <input id="cykel" type="checkbox" name="test1" value="test1" /> Cykel</label> <br /> <span class="select"> <input type="button" id="send-decide" alt="submit" value="select" /> </span> </div> <!-- VISIBLE IF CHECKED --> <div class="egetHus"> <p>this is first box</p> </div> <div class="lejetHus"> <p>this is second box</p> </div> <div class="lejlighed"> <p>this is third box</p> </div> <div class="fritidshus"> <p>this is fourth box</p> </div> <div class="hjemmeboendeBoern"> <p>this is fifth box</p> </div> <div class="udeboendeBoern"> <p>this is sixth box</p> </div> <div class="bil"> <p>this is sixth box</p> </div> <div class="motorcykel"> <p>this is sixth box</p> </div> <div class="knallert"> <p>this is sixth box</p> </div> <div class="cykel"> <p>this is sixth box</p> </div> <script> $(function() { $('.decider').removeClass('hide'); $('.egetHus,.lejetHus,.lejlighed,.fritidshus,.hjemmeboendeBoern,.udeboendeBoern,.bil,.motorcykel,.knallert,.cykel').addClass('hide'); //add hide to both the class $("#send-decide").click(function() { if ($('input[type="checkbox"]:checked').length) { $('.decider ').addClass('hide'); if ($('#egetHus').is(':checked')) { $('.egetHus').removeClass('hide'); } if ($('#lejetHus').is(':checked')) { $('.lejetHus').removeClass('hide'); } if ($('#lejlighed').is(':checked')) { $('.lejlighed').removeClass('hide'); } if ($('#fritidshus').is(':checked')) { $('.fritidshus').removeClass('hide'); } if ($('#hjemmeboendeBoern').is(':checked')) { $('.hjemmeboendeBoern').removeClass('hide'); } if ($('#udeboendeBoern').is(':checked')) { $('.udeboendeBoern').removeClass('hide'); } if ($('#bil').is(':checked')) { $('.bil').removeClass('hide'); } if ($('#motorcykel').is(':checked')) { $('.motorcykel').removeClass('hide'); } if ($('#knallert').is(':checked')) { $('.knallert').removeClass('hide'); } if ($('#cykel').is(':checked')) { $('.cykel').removeClass('hide'); } } else alert('select a checkbox'); }); }); </script> </body> </html>

2 answers

solution1
 1  2017-10-01 19:57:10

You can replace all if else statement with the following code

$('input[type="checkbox"]:checked').each(function(index, el) {
    $('.' + el.id).removeClass('hide')
});

this will work, because every checkbox's id and corresponding p's class are the same.

solution2
 0  2017-10-01 20:00:08

I made this somewhat clean and simple. Try out and comment if the o/p is not correct. 

 $(function() { var arr = [ 'egetHus', 'lejetHus', 'lejlighed', 'fritidshus', 'hjemmeboendeBoern', 'udeboendeBoern', 'bil', 'motorcykel', 'knallert', 'cykel' ]; $('.decider').removeClass('hide'); $.each(arr, function(key, elem) { $('.' + elem).addClass('hide'); //add hide to both the class }); $("#send-decide").click(function() { if ($('input[type="checkbox"]:checked').length) { $('.decider ').addClass('hide'); $.each(arr, function(key, elem) { if ($('#' + elem).prop('checked') === true) { $('.' + elem).removeClass('hide'); } }); } else alert('select a checkbox'); }); });
 .hide { display: none; //add this property }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="decider hide"> <p style="font-size:18px;color:#000;">Hvilken bolig bor du i?</p> <label class="checkbox"> <input id="egetHus" type="checkbox" name="Request" value="Request" /> Eget hus/rækkehus </label> <label class="checkbox"> <input id="lejetHus" type="checkbox" name="Download" value="Download" /> Lejet hus/rækkehus</label> <label class="checkbox"> <input id="lejlighed" type="checkbox" name="test" value="test" /> Ejer-/lejet lejlighed</label> <label class="checkbox"> <input id="fritidshus" type="checkbox" name="test1" value="test1" /> Fritidshus</label> <br /> <p style="font-size:18px;color:#000;">Har du børn?</p> <label class="checkbox"> <input id="hjemmeboendeBoern" type="checkbox" name="Request" value="Request" /> Hjemmeboende børn</label> <label class="checkbox"> <input id="udeboendeBoern" type="checkbox" name="Download" value="Download" /> Udeboende børn</label> <br /> <p style="font-size:18px;color:#000;">Hvilket transportmidler har du?</p> <label class="checkbox"> <input id="bil" type="checkbox" name="Request" value="Request" /> Bil</label> <label class="checkbox"> <input id="motorcykel" type="checkbox" name="Download" value="Download" /> Motorcykel</label> <label class="checkbox"> <input id="knallert" type="checkbox" name="test" value="test" /> Knallert</label> <label class="checkbox"> <input id="cykel" type="checkbox" name="test1" value="test1" /> Cykel</label> <br /> <span class="select"> <input type="button" id="send-decide" alt="submit" value="select" /> </span> </div> <!-- VISIBLE IF CHECKED --> <div class="egetHus"> <p>this is first box</p> </div> <div class="lejetHus"> <p>this is second box</p> </div> <div class="lejlighed"> <p>this is third box</p> </div> <div class="fritidshus"> <p>this is fourth box</p> </div> <div class="hjemmeboendeBoern"> <p>this is fifth box</p> </div> <div class="udeboendeBoern"> <p>this is sixth box</p> </div> <div class="bil"> <p>this is sixth box</p> </div> <div class="motorcykel"> <p>this is sixth box</p> </div> <div class="knallert"> <p>this is sixth box</p> </div> <div class="cykel"> <p>this is sixth box</p> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Smarter way of counting values in object (JS, React) Is there a smarter way of doing this CSS columns JS replacement? Elegant way to do “multiple passes” in a regex? Or make my regex smarter? jQuery, A search for a smarter way to Initialize Doing a lot of date comparing in a smarter way what is a smarter way to pass amCharts data Smarter way to create JSON response from Mysql A smarter way to add multiple event listeners? Is there a nicer/smarter way to filter in JavaScript than adding lots of cumbersome extras? Is there a smarter way to rearrange page elements than using matchMedia for this example?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM