1. 首页
  2. 问题列表
  3. Javascript在单击时隐藏和显示，不呈现，不会给我任何错误
提问者：小点点

Javascript在单击时隐藏和显示，不呈现，不会给我任何错误


我正在尝试使用Javascript on-click函数显示和隐藏内容。我有一个相当长的表，所以我使用了class display：“none”作为它的一部分。然后我添加了一个按钮，点击该按钮将显示表的其余部分。比如隐藏/显示切换。它不会呈现。这是什么问题？控制台没有给我任何错误。谢谢,

null

  function myFunction() {
    var button = document.getElementById("button");
    var hidden = document.getElementsByClassName("change");

    for (var i = 0; i != hidden.length; i++) {
    if (hidden[i].style.display === 'none') {
        hidden[i].style.display === 'visible';
    } else {
      hidden[i].style.display === 'none';
    }
}};
#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

null


共2个答案

匿名用户

我认为问题出在javascript上

hidden[i].style.display===“none”返回的总是空的，因此您可以使用element.classname为该元素指定的返回类

所以:if（hidden[i].offsetwidth==0&&hidden[i].offsetheight==0){}如果元素存在，则返回true。

因此更改将如下所示：

function myFunction() {
    var button = document.getElementById("button").querySelector('button');
    var hidden = document.getElementsByClassName("change");
    for (var i = 0; i < hidden.length; i++) {
      if (hidden[i].offsetWidth == 0 && hidden[i].offsetHeight == 0) {
        hidden[i].style.setProperty("display", "table-row", "important");
        button.innerHTML = 'Show less...';
      } else {
        hidden[i].style.setProperty("display", "none", "important");
        button.innerHTML = 'Past Dates...';
      }
    }
};

null

function myFunction() {
    var button = document.getElementById("button").querySelector('button');
    var hidden = document.getElementsByClassName("change");
    for (var i = 0; i < hidden.length; i++) {
      if (hidden[i].offsetWidth == 0 && hidden[i].offsetHeight == 0) {
        hidden[i].style.setProperty("display", "table-row", "important");
        button.innerHTML = 'Show less...';
      } else {
        hidden[i].style.setProperty("display", "none", "important");
        button.innerHTML = 'Past Dates...';
      }
    }
};
#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

匿名用户

您有一个类.change，它具有规则display:none；我建议依赖于该类，而不是显式更改样式。下面是一个演示：

null

  

    function myFunction() {
	var button = document.getElementById("button");
	var hidden = document.getElementsByClassName("change");
	for(var i = 0; i < hidden.length; i++) {
	  hidden[i].classList.toggle('change' );
          // .toggle() instead of if and else
        }
}
#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS