javascript - 使用 javascript 和 css 更改类

Question

我想在用户点击时添加或删除类，这应该会更改 css 上的图像...

所以，我有这个 html:

<th class="etiqueta_grid" onclick="client.orderMethod('Name',this.cellIndex);">Name</th>

这是 javascript 方法:

sort : "ASC",
order : "Client",
orderMethod : function(field,object){
            $(client.domroot_nav + " #grid-head2 th").removeClass('down').removeClass('up');

        if(field == client.order){
            if(client.sort == "ASC"){
                client.sort = "DESC";
                $(client.domroot_nav + " #grid-head2 th:eq("+object+")").addClass('up');
            }else{
                client.sort = "ASC";
                $(client.domroot_nav + " #grid-head2 th:eq("+object+")").addClass('down');
            }
        }else{
            client.sort = "ASC";
            client.order = field;
            $(client.domroot_nav + " #grid-head2 th:eq("+object+")").addClass('down');
        }
        client.show();

        return false;
    }

我把它放在 css 上:

.down:before{
   background-image: url(images/down.png);
    background-size: 10px 15px;
    display: inline-block;
    width: 10px; 
    height: 15px;
    margin-right: 2px;
    content:"";  
 }
 .etiqueta_grid{
     content: "";
 }
 .up{
    background-image: url(images/up.png);
    background-size: 10px 15px;
    display: inline-block;
    width: 10px; 
    height: 15px;
    margin-right: 2px;
    content:""; 
 }

但它不起作用:(

Answer 1

为此使用 jQuery toggleClass。

<script>
    $(document).ready(function){
        $("th").click(function(){
            $("#elementid").toggleClass("up");
        });
    });
</script>