javascript - Simplfly jQuery and HTML to show/hide divs on page -

-

i came basic jquery using series of if-statements show/hide divs on page via html select list. optimize code in couple ways if possible:

1) how can use less code achieve same result?

2) maybe bit broad, how can optimize code new divs don't have manually typed out? in other words, make don't have add $(block-x).hide() $(block-x).show() etc...

html:

<div class="container">   <form class="form">     <div class="form-group">       <label for="selectlist">filter divs</label>       <select id="selectlist" class="form-control">         <option value="1" id="lall" selected="selected">show all</option>         <option value="2" id="lone">one</option>         <option value="3" id="ltwo">two</option>         <option value="4" id="lthree">three</option>         <option value="5" id="lfour">four</option>       </select>     </div>   </form>    <div class="filterdiv">     <div id="block-1">       <h1> div one</h1>     </div>     <div id="block-2">       <h1> div two</h1>     </div>     <div id="block-3">       <h1> div three</h1>     </div>     <div id="block-4">       <h1>div four</h1>     </div>   </div> </div>

javascript:

$('#selectlist').change(function() {   $('#block-1').hide();   $('#block-2').hide();   $('#block-3').hide();   $('#block-4').hide();    if ($('#lall').is(':selected')) {     $('#block-1').fadein();     $('#block-2').fadein();     $('#block-3').fadein();     $('#block-4').fadein();    }   if ($('#lone').is(':selected')) {     $('#block-1').fadein();    }   if ($('#ltwo').is(':selected')) {     $('#block-2').fadein();    }   if ($('#lthree').is(':selected')) {     $('#block-3').fadein();    }   if ($('#lfour').is(':selected')) {     $('#block-4').fadein();    }  });

fiddle: https://jsfiddle.net/matts213/29ksshrr/5/

thanks, matt

change blocks have common class , can use value of select shorten code:

$('#selectlist').change(function() {     var selected = parseint($('#selectlist').val());     var = (selected === 1) ? $('.container').children().fadein() : false;     var showitem = (selected > 1) ? $('.container').children(':nth-child(' + (selected - 1) + ')').fadein().siblings().hide() : false; });

https://jsfiddle.net/mark_c/q5e7x2nc/


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more