第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

更改 Font Awesome 按鈕樣式 onClick

更改 Font Awesome 按鈕樣式 onClick

LEATH 2023-03-03 15:42:14
我有一個(gè)樣式為 Font Awesome 的按鈕。              <button                onClick={this.changeLockButtonStyle}                id="LockButton"                >                <FaLockOpen />              </button>我正在嘗試找到一種方法將樣式更改為<FaLockClosed />從在線閱讀中我看到的唯一示例是關(guān)于 JQuery 和 class=”fas fa-lockclosed” 切換類。但我使用的是按鈕,而不是普通圖標(biāo)。我已經(jīng)嘗試過document.getElementById('LockButton').innerHTML= '<FaLockClosed />'但沒有用。如果可能,我想避免使用 JQuery。
查看完整描述

3 回答

?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

干得好:


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>

    );

}


查看完整回答
反對 回復(fù) 2023-03-03
?
呼喚遠(yuǎn)方

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊

我的最佳實(shí)踐解決方案是使用 css 類。但如果你做不到,你可以使用由 javascript 變量控制的 2 個(gè)圖標(biāo)的顯示狀態(tài)。



查看完整回答
反對 回復(fù) 2023-03-03
?
達(dá)令說

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果您使用反應(yīng)或角度,我只會(huì)根據(jù)按下按鈕期間設(shè)置的變量切換組件。


有關(guān)如何在 React 中進(jìn)行切換的參考 https://stackoverflow.com/a/46425155/14167216


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


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>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

    <button

      onClick='changeLockButtonStyle()'

      id="LockButton"

      class="fa fa-lock"

    >

    </button>

</body>


查看完整回答
反對 回復(fù) 2023-03-03
  • 3 回答
  • 0 關(guān)注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)