Question

所以我正在使用精灵来显示空白复选框，每次点击我想要它，所以它从空白，绿色复选标记，灰色复选标记，到X.链接是精灵图像。

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>

Answer 1

我认为你可能会使你的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不是最有效的，但这应该让你开始。

使用精灵与Jquery多个图像

1 个答案: