單擊時更改按鈕的內容和顏色。

-2

在http://www.lesha.wemakesites.ru/有一個模型。一旦專注於加號圖標，它將被一個按鈕「跟我來」取代。我想要做的就是將此按鈕更改爲紅色，點擊「取消關注」按鈕。如果有人知道如何構建它，那麼它是超級的，這樣當單擊「取消關注」按鈕時，它就變成「關注」一個。單擊時更改按鈕的內容和顏色。

來源

2017-09-08 lesha_ber

這似乎是微不足道的。你嘗試了什麼？ –

請提供您到目前爲止嘗試過的HTML/CSS/JS。 –

.block：focus .button-2 {background：olive; } 這就是我嘗試做點擊時發生，但它永遠不會改變背景至少 –

拉你jquery項目。這不能用css來實現。

HTML代碼

<button id="btn" class="btn-blue">Follow</button>

CSS代碼

.btn-blue { 
    background-color: blue; 
} 

.btn-red { 
    background-color: red; 
}

的Javascript

$('#btn').on('click', function() { 
    if (!$(this).hasClass("followed")) { 
     $(this).addClass("followed btn-red"); 
     $(this).removeClass("btn-blue"); 
     $(this).html("Followed"); 
    } else { 
     $(this).addClass("btn-blue"); 
     $(this).removeClass("followed btn-red"); 
     $(this).html("Follow"); 
    } 
});

使盡可能簡單的JS理解。

來源

2017-09-08 15:44:08

我們如何檢查.hasClass（「follow」），因爲沒有這樣的類的元素？不管怎麼樣，不管這個條件是什麼，整個事情都在起作用...... –

它正在檢查#btn元素是否有一類跟隨。那是行得通嗎？ –

它工作正常，但我們這裏沒有類的元素，我對嗎？現在有班級「btn-blue」嗎？ –

我建議有按鈕的兩個版本，你可以使用

display: none;

的一個是當前未使用。

如果用戶之間切換回來，你可以將你的狀態存儲在一個變量。

let following = true; 
let btn = document.getElementById("btn"); 

if (!!following) { 
    btn.style.dispaly = "none"; 
    following = false; 
} else { 
    btn.style.display = "block"; 
    following = false; 
}

來源

2017-09-08 15:20:39 Dave

是否有可能完成這項任務與CSS只？ –

我不得不看你的代碼來幫助你更誠實。 – Dave

單擊時更改按鈕的內容和顏色。

回答

相關問題