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

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JavaScript 基于復(fù)選框切換 DIV

JavaScript 基于復(fù)選框切換 DIV

叮當(dāng)貓咪 2023-08-18 13:57:07
我有幾個復(fù)選框和 div。我想根據(jù)復(fù)選框切換 div。我嘗試使用三元來切換 div，但它沒有按我的預(yù)期工作。下面是js。我不想使用 jQuery。function toggle(flavor){? var checkBox = document.getElementById(flavor)? checkBox === true ? document.getElementById(flavor+"Div").style.display = "block" : document.getElementById(flavor+"Div").style.display = "none";}這是我得到的錯誤： pen.js:4 Uncaught TypeError: Cannot read property 'style' of null感謝您的任何幫助，您可以提供。
查看完整描述

3 回答

?
有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個贊

你的筆上有一些拼寫錯誤。JavaScript 區(qū)分大小寫，因此 vanillaDiv 和 VanillaDiv 不是同一件事。您的所有 DIV 均以小寫字母開頭，而復(fù)選框均以大寫字母開頭，因此您永遠(yuǎn)無法正確匹配該元素。


編輯：（僅供記錄）要正確驗(yàn)證是否選中復(fù)選框，您需要使用該.checked屬性。（忘記寫這部分文本，盡管我發(fā)布的代碼從一開始就進(jìn)行了此更正）。


所以改變：


<div id="vanillaDiv" class="hideDiv">

<textarea  id="vanComments"></textarea>

</div>

到 ：


<div id="VanillaDiv" class="hideDiv">

<textarea  id="vanComments"></textarea>

</div>

此外，使用.checked復(fù)選框?qū)傩院腿唵蔚姆椒ㄊ牵?/p>


function toggle(flavor){

  var checkBox = document.getElementById(flavor).checked;

  document.getElementById(flavor+"Div").style.display = checkBox === true ? "block" : "none";

}


查看完整回答
反對 回復(fù) 2023-08-18
?
30秒到達(dá)戰(zhàn)場

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

就像評論中提到的那樣，您有一個案例問題需要修復(fù)“Vanilla”->“vanilla”等。


另外，也許這對三元運(yùn)算符會有幫助（我花了一段時間才理解它）：通常，您希望使用三元來返回某些內(nèi)容，而不僅僅是在執(zhí)行兩個不同條件之間切換。


IE。let newVar = checkSomething === checkAgainst ? this : that


由于您已經(jīng)使用一個.hideDiv類來設(shè)置顯示樣式，因此您可以使用該element.classList.toggle(className)方法在兩種狀態(tài)之間切換，并讓 vanilla js 在后臺處理布爾值。


我將其留console.log(thing)在片段中只是因?yàn)樗梢詭椭伊私饷總€點(diǎn)的內(nèi)容。


function toggle(flavor){

  var checkBox = document.getElementById(flavor)

  console.log(checkBox)

  

  let divElement = document.getElementById(flavor+"Div")

  console.log(divElement)

  

  divElement.classList.toggle('hideDiv')

  }

.hideDiv{

  display:none

}

<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla

<input type="checkbox" id="cherry"  onClick="toggle('cherry')"/> Cherry

<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple


<div id="vanillaDiv" class="hideDiv">

<textarea  id="vanComments"></textarea>

</div>


<div id="cherryDiv" class="hideDiv">

<textarea id="cherComments"></textarea>

</div>


<div id="appleDiv" class="hideDiv">

<textarea id="appComments"></textarea>

</div>


查看完整回答
反對 回復(fù) 2023-08-18
?
呼啦一陣風(fēng)

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

有兩個問題：

  1. html 事件應(yīng)該具有相同的目標(biāo)大小寫級別，您當(dāng)前正在嘗試獲取 DOM 中存在的像“VanillaDiv”而不是“vanillaDiv”這樣的 id。

  2. javascript 代碼需要檢查element.checked屬性而不是詢問element === true

function toggle(flavor) {

  const checkbox = document.getElementById(flavor);

  const textarea = document.getElementById(flavor+"Div");

  // here you need to use .checked instead of element

  textarea.style.display = checkbox.checked ? "block" : "none";

}

.hideDiv {

    display: none

}

<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla

<input type="checkbox" id="cherry" onClick="toggle('cherry')"/> Cherry

<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple


<div id="vanillaDiv" class="hideDiv">

<textarea id="vanComments">vanilla</textarea>

</div>


<div id="cherryDiv" class="hideDiv">

<textarea id="cherComments">cherry</textarea>

</div>


<div id="appleDiv" class="hideDiv">

<textarea id="appComments">apple</textarea>

</div>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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