토글버튼을 css로 만들었는데 위젯출력을 넣고싶습니다. 채택완료
css로 버튼을만들고 html 에 이렇게 넣었는데요
<div id="container">
<div class="toggle-switch">
<input type="checkbox" id="chkTog">
<label for="chkTog">
<span class="toggle-track"></span>
</label>
</div>
</div>
여기에 버튼을 누르면 위젯이 바뀌게 하고싶습니다.
토글버튼을 눌러서
오프상태일때는 밝은버전을 나타내고 어두운버전은 숨기기
온상태일때는 밝은버전위젯은 숨기고 어두운버전출력
(밝은버전 / 어두운버전)
<div id="trading-view-primaryday" class="h-full">
<div id="tradingview_f0268-wrapper">
<iframe id="tradingview_f0268"
이게 밝은버전이고
<div id="trading-view-primarynight" class="h-full">
<div id="tradingview_f0269-wrapper">
<iframe id="tradingview_f0269">
이게 어두운버전이라면 어떻게 해야할까요?
위젯 구문중에 id가 3개나되서 뭘 어떻게 해야할지를 모르겠습니다ㅠ
답변 1개
</p>
<p><code>$(document).ready(</code><code>function</code><code>(){</code></p>
<p><code> </code>$("<meta charset="UTF-8" />chkTog")<code>.change(function</code><code>(){</code></p>
<p><code> </code><code>if(</code>$("<meta charset="UTF-8" />chkTog").<code>is(":checked")){ </code></p>
<p><code> $("#</code><meta charset="UTF-8" />tradingview_f0269").show();</p>
<p><meta charset="UTF-8" /> <code>$("</code>tradingview_f0268").hide();
<meta charset="UTF-8" /></p>
<p><code> </code><code>}</code><code>else</code><code>{</code></p>
<p><code> $("#</code><meta charset="UTF-8" />tradingview_f0268").show();</p>
<p><meta charset="UTF-8" /> <code>$("</code>tradingview_f0269").hide();</p>
<p><code> </code><code>}</code></p>
<p><code> </code><code>});</code></p>
<p><code>});</code></p>
<p>
위 방법으로 하시면됩니다. 활용하세요!
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인