javascript - $(this).toggleClass not working -


so i'm busy creating mini webshop, , i'm using google's front-end (mdl) template

what wanted in webshop is, when user clicks on x product want toggle class,

i'm using closures inside loops detect clicks on product.

my issue is, class won't toggle. tried using addclass work not convenient because want toggle class (from selected product not selected)

checkout snippet & understand, see detect clicks properly. toggling classes doesn't work.

$(document).ready(function() {  	console.log("document ready");    (var = 1; < $(".products").length; i++) {  		(function(index){  		$(".products").click(  			function(e){  			console.log("click successfull!");  	        console.log(this);  	         $(this).css("border", "1px solid #1976d2");  	           	         $(this).toggleclass("mdl-shadow--16dp");  	    	});  		})(i);  	}    	$("#card").keyup(function(event){  	        if(event.keycode == 84){  	        console.log("class toggled!");  	        $(".products").toggleclass("mdl-shadow--2dp mdl-shadow--16dp");  	        }  	    });        });
.mdl-card__actions{    display: flex;    box-sizing:border-box;     align-items: center;  }  .page-content .mdl-card {  	display: inline-block;  	margin: 5px 5px 5px 5px;	  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body>    	<div class="page-content">  							<!-- content goes here -->  							<div class="mdl-card mdl-shadow--2dp products">  								<div class="mdl-card__title">  									<h2 class="mdl-card__title-text">dell xp13 </h2>  								</div>  								<img src="https://goo.gl/gddh0i" alt="dell xp13">  								<div class="mdl-card__supporting-text"><b>basisprijs: 1.649,00$<b></div>  								<div class="mdl-card__actions mdl-card--border">  									<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  										add cart  									</a>  									<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  								</div>  							</div>		  							<div class="mdl-card mdl-shadow--2dp products">  							<div class="mdl-card__title">  								<h2 class="mdl-card__title-text">chromebook pixel2</h2>  							</div>  							<img src="https://goo.gl/pnie9c.png" alt="chrombook">  							<div class="mdl-card__supporting-text"><b>basisprijs: 999,99$<b></div>  							<div class="mdl-card__actions mdl-card--border">  								<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  									add cart  								</a>  								<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  							</div>  						</div>  						<div class="mdl-card mdl-shadow--2dp products">  							<div class="mdl-card__title">  								<h2 class="mdl-card__title-text">macbook 13'</h2>  							</div>  							<img src="https://goo.gl/qzq0cr" alt="macbook">  							<div class="mdl-card__supporting-text"><b>basisprijs: 1.129,00$<b></div>  							<div class="mdl-card__actioder">  								<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  									add cart  								</a>  								<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  							</div>  						</div>  					</div>    </body>

i show effect i'm toggling in separate link, in link i'm toggling effect "divs" won't per click.

i'm not sure need loop here, in opionion reason why wasn't working. i've set snippet without loop, toggleclass() works well, i've added .border class css, it's easier handle this. further, i've combined both toggleclass() in 1 line, it's optical thing.

check out snippet

$(document).ready(function() {    console.log("document ready");    $(".products").click(function() {      console.log("click successfull!");      console.log(this);      $(this).toggleclass("border").toggleclass("mdl-shadow--16dp");      });      $("#card").keyup(function(event) {      if (event.keycode == 84) {        console.log("class toggled!");        $(".products").toggleclass("mdl-shadow--2dp mdl-shadow--16dp");      }    });  });
.mdl-card__actions {    display: flex;    box-sizing: border-box;    align-items: center;  }  .page-content .mdl-card {    display: inline-block;    margin: 5px 5px 5px 5px;  }  .border {    border: 1px solid #1976d2;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <body>    <div class="page-content">      <!-- content goes here -->      <div class="mdl-card mdl-shadow--2dp products">        <div class="mdl-card__title">          <h2 class="mdl-card__title-text">dell xp13 </h2>        </div>        <img src="https://goo.gl/gddh0i" alt="dell xp13">        <div class="mdl-card__supporting-text"><b>basisprijs: 1.649,00$<b></div>  								<div class="mdl-card__actions mdl-card--border">  									<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  										add cart  									</a>  									<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  								</div>  							</div>		  							<div class="mdl-card mdl-shadow--2dp products">  							<div class="mdl-card__title">  								<h2 class="mdl-card__title-text">chromebook pixel2</h2>  							</div>  							<img src="https://goo.gl/pnie9c.png" alt="chrombook">  							<div class="mdl-card__supporting-text"><b>basisprijs: 999,99$<b></div>  							<div class="mdl-card__actions mdl-card--border">  								<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  									add cart  								</a>  								<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  							</div>  						</div>  						<div class="mdl-card mdl-shadow--2dp products">  							<div class="mdl-card__title">  								<h2 class="mdl-card__title-text">macbook 13'</h2>  							</div>  							<img src="https://goo.gl/qzq0cr" alt="macbook">  							<div class="mdl-card__supporting-text"><b>basisprijs: 1.129,00$<b></div>  							<div class="mdl-card__actioder">  								<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">  									add cart  								</a>  								<div class="mdl-layout-spacer"></div>  									<i class="material-icons">add_shopping_cart</i>  							</div>  						</div>  					</div>    </body>


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more