javascript - usings sprites with Jquery multiple images -
so am using sprites show blank checkboxes , on each click want have goes blank, green check mark, grey check mark, x. link sprite image.
http://s23.postimg.org/fz6v0ts6z/sprite.png
anyways able select box once , turns red x off can't change check marks... great!
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> <title></title> <style> #catnav li { display: block; width:25px; height: 25px; text-indent: -9999px; background: url(images/sprite.png)no-repeat; } #catnav li a#list-one-button { background-position: -25px -25px; } #catnav li.activeblankbutton1 a#list-one-button { background-position: -25px -75px } #catnav li a#list-two-button { background-position: -25px -75px; } #catnav li.activeblankbutton2 a#list-two-button { background-position: -25px -25px; } #catnav li a#list-three-button { background-position: -25px -125px; } #catnav li.activeblankbutton3 a#list-three-button { background-position: -25px -125px; } #catnav li a#list-four-button { background-position: -25px -175px; } #catnav li.activeblankbutton4 a#list-four-button { background-position: -25px -175px; } </style> <script> $(function(){ $("#catnav li a").click(function(){ $("#catnav li").removeclass("activeblankbutton1"); $(this).parent().addclass("activeblankbutton2"); }); // $("#catnav li a").click(function(){ // $("#catnav li").removeclass("activeblankbutton"); // $(this).parent().addclass("activeblankbutton2"); // }); }); </script> </head> <body> <div id="page-wrap"> <div class="box"> <ul id="catnav"> <li class="activeblankbutton1"><a id="list-one-button">blank</a></li> <li class="activeblankbutton2"><a id="list-two-button">x</a></li> <li class="activeblankbutton3"><a id="list-three-button">green</a></li> <li class="activeblankbutton4"><a id="list-four-button">grey</a></li> </ul> </div> </div> </body> </html>
i think might on complicating css making logic in javascript little off.
i'd recommend removing id specific styles make simpler:
#catnav li { display: block; width:25px; height: 25px; text-indent: -9999px; background: url(http://s23.postimg.org/fz6v0ts6z/sprite.png)no-repeat; } #catnav li.activeblankbutton1 { background-position: -25px -75px } #catnav li.activeblankbutton2 { background-position: -25px -25px; } #catnav li.activeblankbutton3 { background-position: -25px -125px; } #catnav li.activeblankbutton4 { background-position: -25px -175px; } from there can have listeners clicks on different styles toggling them:
$(document).ready(function(){ $("ul").on("click", ".activeblankbutton1", function(){ $(this).removeclass("activeblankbutton1"); $(this).addclass("activeblankbutton2"); }); $("ul").on("click", ".activeblankbutton2", function(){ $(this).removeclass("activeblankbutton2"); $(this).addclass("activeblankbutton3"); }); $("ul").on("click", ".activeblankbutton3", function(){ $(this).removeclass("activeblankbutton3"); $(this).addclass("activeblankbutton4"); }); $("ul").on("click", ".activeblankbutton4", function(){ $(this).removeclass("activeblankbutton4"); $(this).addclass("activeblankbutton1"); }); }); see jsfiddle
i admit jquery here not efficient should started.
Comments
Post a Comment