使用jquery多個圖像的精靈

所以我使用精靈來顯示空白複選框，並在每次點擊我想擁有它，因此它從空白到綠色複選標記到灰色複選標記到X.鏈接是精靈形象。使用jquery多個圖像的精靈

http://s23.postimg.org/fz6v0ts6z/sprite.png

反正我目前只能夠選擇一次盒子，它變成紅色的X關閉，但我不能改變什麼的查馬克...任何幫助將是巨大的！

<html> 
<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
    <title></title> 
    <style> 

#catNav li a { 
    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>

來源

2014-06-25 user3366099

我想你可能會在你的CSS這使得邏輯在JavaScript有點過複雜。

我建議你刪除的ID特定的風格，使其更簡單：

#catNav li a { 
    display: block; width:25px; height: 25px; text-indent: -9999px; background:   url(http://s23.postimg.org/fz6v0ts6z/sprite.png)no-repeat; 
} 
#catNav li.activeBlankButton1 a { 
    background-position: -25px -75px 
} 
#catNav li.activeBlankButton2 a { 
    background-position: -25px -25px; 
} 
#catNav li.activeBlankButton3 a { 
    background-position: -25px -125px; 
    } 
#catNav li.activeBlankButton4 a { 
    background-position: -25px -175px; 
}

從那裏，你可以對不同風格的點擊監聽器切換它們：

$(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"); 
    }); 
});

看到這個JSFiddle

我會承認我在這裏的jQuery不是最高效的，但是這應該讓你開始。

來源

2014-06-25 23:49:24 sharf

非常感謝！是的，我認爲它是我想的！對此，我真的非常感激！ jQuery和我不是最好的朋友......是的 – user3366099

使用jquery多個圖像的精靈

回答

相關問題