首頁猿問更改 Font Awesome...

更改 Font Awesome 按鈕樣式 onClick

JavaScript

LEATH 2023-03-03 15:42:14

我有一個樣式為 Font Awesome 的按鈕。 <button onClick={this.changeLockButtonStyle} id="LockButton" > <FaLockOpen /> </button>我正在嘗試找到一種方法將樣式更改為<FaLockClosed />從在線閱讀中我看到的唯一示例是關于 JQuery 和 class=”fas fa-lockclosed” 切換類。但我使用的是按鈕，而不是普通圖標。我已經嘗試過document.getElementById('LockButton').innerHTML= '<FaLockClosed />'但沒有用。如果可能，我想避免使用 JQuery。

查看完整描述

3 回答

PIPIONE

TA貢獻1829條經驗獲得超9個贊

干得好：

const [isLocked, setIsLocked] = useState(false);

return (

<button

type="button"

onClick={() => { setIsLocked(true); }}

{isLocked ? <FaLockClose /> : <FaLockOpen />}

</button>

);

更新：這就是你在類組件中的做法。

constructor(props) {

super(props);

this.state = {

isLocked: false

};

this.lockIcon = this.lockIcon.bind(this);

}

lockIcon() {

this.setState({ isLocked: true });

}

render() {

const { isLocked } = this.state;

return (

<button

type="button"

onClick={this.lockIcon}

{isLocked ? <FaLockClose /> : <FaLockOpen />}

</button>

);

}

反對回復 2023-03-03

呼喚遠方

TA貢獻1856條經驗獲得超11個贊

我的最佳實踐解決方案是使用 css 類。但如果你做不到，你可以使用由 javascript 變量控制的 2 個圖標的顯示狀態。

反對回復 2023-03-03

達令說

TA貢獻1821條經驗獲得超6個贊

如果您使用反應或角度，我只會根據按下按鈕期間設置的變量切換組件。

有關如何在 React 中進行切換的參考 https://stackoverflow.com/a/46425155/14167216

這是一個 jQuery 示例。您可以在按鈕上設置類，然后檢查按鈕是否有類。如果它有鎖定類，則更改為解鎖類，反之亦然。檢查下面的示例代碼。

function changeLockButtonStyle() {

var icon = $('#LockButton')

var hasLock = icon.hasClass('fa-lock');

if(hasLock) {

icon.removeClass('fa-lock').addClass('fa-unlock');

} else {

icon.removeClass('fa-unlock').addClass('fa-lock');

}

<head>

</head>

<body>

<button

onClick='changeLockButtonStyle()'

id="LockButton"

class="fa fa-lock"

</button>

</body>

反對回復 2023-03-03

3 回答
0 關注
179 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

更改 Font Awesome 按鈕樣式 onClick

更改 Font Awesome 按鈕樣式 onClick

3 回答

添加回答