jquery按鈕顏色開關不工作

我試圖使用addClass()，removeClass()和hasClass()方法。但是這個小代碼根本不起作用？jquery按鈕顏色開關不工作

查看所有3個功能的文檔。似乎它應該工作。

<!DOCTYPE html> 
<html> 
<head> 
<title>Trials</title> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style> 
    .liked 
    { 
     color:red; 
    } 
</style> 
</head> 
<body> 
<br><br><br> 
<button id="like1" class="btn likeBtns liked">5<span class="glyphicon glyphicon-heart"></span></button> 

<script> 
$('.likeBtns').on('click', function(){ 

    var x = $(this).attr('id'); 
    x = "#"+x; 
    if($("#like1").hasClass("liked")) 
    { 
     console.log("has"); 
     $("#like1").removeClass("liked"); 
    } 
    else 
    { 
     console.log("doesnt have"); 
     $("#like1").addClass("liked"); 
    } 
}); 
</script> 
</body> 
</html>

來源

2017-04-14 Vandan Kumbhat

不是檢查，如果事情有一個類，只要使用'toggleClass'。如果它不在那裏，它會將該類添加到對象中，如果它存在，則將其刪除。 – Goose

不錯的選擇，我現在試過，但同樣的問題。你有沒有在原始代碼中發現任何問題？ –

你可以檢查你的瀏覽器是否有任何控制檯錯誤？這應該指向正確的方向。在你的代碼中，提到'x'的行是不相關的，因爲你之後已經指定了一個選擇器。下面的答案是功能性的，聽起來像它完全是你在做什麼。可能是因爲某些樣式問題，您認爲它不起作用。 – Goose

使用toggleClass()象下面這樣： -

工作例如： -

$('.likeBtns').on('click', function(){ 
 
    $(this).toggleClass("liked"); 
 
});

.liked{ 
 
    color:red; 
 
} 
 

 
.liked:hover, 
 
.liked:focus, 
 
.liked.focus { 
 
    color:red !important; 
 
}

<html> 
 
    <head> 
 
    <title>Trials</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <br><br><br> 
 
    <button id="like1" class="btn likeBtns">5<span class="glyphicon glyphicon-heart"></span></button> 
 
    </body> 
 
</html>

注： - 當你點擊按鈕，然後單擊外的效果會顯示。

，那是因爲你的bootstrap.css低於已應用於按鈕CSS： -

btn.focus, .btn:focus, .btn:hover { 
    color: #333; 
    text-decoration: none; 
}

在我的代碼，我重寫css引導代碼。現在，它的工作完全沒

來源

2017-04-14 20:11:43

是的，問題在於bootstrap，我會通過一些自定義類來覆蓋它。榮譽指出確切的問題！ –

@VandanKumbhat很高興爲您效勞。祝你有美好的一天：）：） –

如果您需要更改按鈕的顏色完全，你需要知道的是，類BTN還曾在:hover和:focus僞類。這意味着你需要添加.liked：hover和.liked：focus。

的片段：

$('.likeBtns').on('click', function(){ 
 
    $(this).toggleClass('liked') 
 
});

.liked 
 
{ 
 
    color:red; 
 
} 
 
.liked:hover, 
 
.liked:focus, 
 
.liked.focus { 
 
    color:red !important; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<button id="like1" class="btn likeBtns liked">5<span class="glyphicon glyphicon-heart"></span></button>

來源

2017-04-14 20:20:06 gaetanoM

jquery按鈕顏色開關不工作

回答

相關問題