为什么不工作功能javascript调整大小？答案

【问题标题】：why not working function javascript resize?为什么不工作功能javascript调整大小？
【发布时间】：2018-07-09 16:54:09
【问题描述】：

我的代码 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();
});

【问题讨论】：

更改后不工作

标签： javascript function if-statement resize width

【解决方案1】：

要使用.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>

【讨论】：

【解决方案2】：

您的元素 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>

【讨论】：

这里一切都消失了，我希望功能在超过分辨率后工作。当你点击一个时，其余的就会消失

【解决方案3】：

您需要在 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');
}

【讨论】：