addClass和removeClass

时间:2013-12-19 11:16:46

标签: javascript html ajax

我不习惯在jquery中编写一些代码但是很努力。

制作投票应用程序,我想在用户点击页面中的两个按钮之一时向用户显示不同的背景。

div tag

<div id="soruBtnSol" class="bgsol">
    <!-- solbuttonbg -->
    <a class="sorubtn<?=$i?>1" href="javascript:;" rel="<?=$i?>">
        <span id="userCevap" class="sorubtnTxtSol">
                                        <em class="<?php echo $soruCevapId[0]; ?>" style="visibility:visible">
                                            <?=$question[0]?>
                                        </em>
                                    </span>
    </a>
</div>

jquery的

$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT

    var grupid = 'groupId='+$("#groupIdd").attr('class'); 
    var cevapid = 'cevapId='+$("#cevapIdd").attr('class'); 
    var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class'); 

    console.log(grupid); //example : 45
    console.log(cevapid);
    console.log(usercevapid);

    if(cevapid != usercevapid) { 

            $( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "fail" );
        } 

    if(cevapid == usercevapid) { 

            $( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "success" );
            currentskor = 5; 
    }

});

编辑:CSS ADDED

#soruBtnSol {
    position: absolute;
    top: 50%;
    left: 80px;
    width: 192px;
    height: 75px;
    margin-left: -75px;
    z-index: 3;
    float: left;
}

.bgsol {
    background: url("../img/btn-left.png") no-repeat;

}

.fail {
    position: absolute;
    background: url("../img/fail.png") no-repeat;
    z-index: 4;
}

.success {
    position: absolute;
    background: url("../img/success.png") no-repeat;
    z-index: 4;
}

如果用户给出了错误答案,我想将<div id="soruBtnSol" class="bgsol">更改为<div id="soruBtnSol" class="fail">。如果没有,成功

我在jquery中的 if()条件中可能会遇到一些问题。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

试试这个

$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT

    var grupid = 'groupId='+$("#groupIdd").prop('class'); 
    var cevapid = 'cevapId='+$("#cevapIdd").prop('class'); 
    var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class'); 

    console.log(grupid); //example : 45
    console.log(cevapid);
    console.log(usercevapid);

    if(cevapid != usercevapid) { 

            $(this).removeClass("bgsol").addClass("fail");
        } 

    if(cevapid == usercevapid) { 

            $(this).removeClass("bgsol").addClass("success");
            currentskor = 5; 
    }

});