[英]why not working function javascript resize?
我的代碼javascript無法正常工作。 我希望功能能夠正常運行,如果寬度超過500像素。
<ul>
<li class="dawid">Dawid</li>
<li class="piotrek">Piotr</li>
<li class="to">Tomek</li>
</ul>
和JAVASCRIPT代碼-不起作用
document.getElementById("dawid").addEventListener("click",displaytwo);
document.getElementById("piotrek").addEventListener("click",displayone);
function displaytwo(){
document.getElementById("piotrek").style.display='none';
document.getElementById("tomek").style.display='none';
}
function displayone(){
document.getElementById("dawid").style.display='none';
document.getElementById("tomek").style.display='none';
}
調整大小
function screen_resize(){
var w = parseInt(window.innerWidth);
if(w > 500)
{
displaytwo();
displayone();
}}
$(window).resize(function(e) {
screen_resize();
});
$(document).ready(function(e) {
screen_resize();
});
為了使用.getElementById
您需要在元素上添加id:
<ul>
<li class="da" id="dawid">Dawid</li>
<li class="pi" id="piotrek">Piotr</li>
<li class="to" id="piotrek">tomek</li>
</ul>
您需要在HTML元素上聲明ID,否則getElementByID()將不起作用。
<ul>
<li id="dawid" class="da">Dawid</li>
<li id="piotr" class="pi">Piotr</li>
<li id="tomek" class="to">Tomek</li>
</ul>
看起來您也正在使用jQuery並已為其分配了類,因此您還可以使用以下代碼按類抓取DOM元素:
$(".da").click(displaytwo);
$(".pi").click(displayone);
function displaytwo(){
$(".piotrek").css('display','none');
$(".tomek").css('display','none');
}
function displayone(){
$(".dawid").css('display','none');
$(".tomek").css('display','none');
}
您的元素li
中缺少ID,請添加ID:
<li class="dawid" id="dawid">Dawid</li>
<li class="piotrek" id="piotrek">Piotr</li>
<li class="to" id="tomek">Tomek</li>
document.getElementById("dawid").addEventListener("click", displaytwo); document.getElementById("piotrek").addEventListener("click", displayone); function displaytwo() { document.getElementById("piotrek").style.display = 'none'; document.getElementById("tomek").style.display = 'none'; } function displayone() { document.getElementById("dawid").style.display = 'none'; document.getElementById("tomek").style.display = 'none'; } function screen_resize() { var w = parseInt(window.innerWidth); if (w > 500) { displaytwo(); displayone(); } } $(window).resize(function(e) { screen_resize(); }); $(document).ready(function(e) { screen_resize(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="dawid" id="dawid">Dawid</li> <li class="piotrek" id="piotrek">Piotr</li> <li class="to" id="tomek">Tomek</li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.