Question

我需要帮助。我希望在点击他们的兄弟姐妹时显示元素。我想用纯javascript来做这些事情。

当我运行我的代码并点击时，浏览器控制台（Chrome和Firefox）中既没有发生任何事情也没有显示错误。

我认为一个问题可能是de window.onload函数中的onclick事件，但我找不到修复它的方法。

这是我的HTML代码：

<div class="year_element">
  <h3 class="year">2015</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=2015+Marzo">Marzo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1998</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=1998+Mayo">Mayo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1987</h3>
  <ul class="hide_months months">
  </ul>
</div>

这是我的JavaScript代码：

＆＃13;

window.onload = function() {
  var years = document.getElementsByClassName('year');
  //When doing click on a year, show months
  for (var i = 0; i < years.length; i += 1) {
    //Function needs event as parameter to work
    years[i].onclick = function(event) {
      var selectedYear = event.target;
      var month_list = selectedYear.nextSibling.nextSibling;
      //Showing months
      if (month_list.classList.contains('hide_months')) {
        month_list.classList.remove('hide_months');
        //Hiding months
      } else {
        month_list.classList.add('hide_months');
      }
    };
  };
}

＆＃13;

你的答案告诉我代码工作，给了我问题的关键：另一个文件js正在执行window.onload函数，所以这个没有工作。这已通过使用确定。

window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);

感谢。

Answer 1

您是否正确运行了JavaScript？我将所有内容粘贴到一个html文件中，点击似乎有效。它添加和删除hide_months类。我没有你的css让Marzo / Mayo消失，但看起来加载和点击正在按预期工作。

<script type="text/javascript">
window.onload = function() {
  var years = document.getElementsByClassName('year');
  //When doing click on a year, show months
  for (var i = 0; i < years.length; i += 1) {
    console.log('found some elements');
    //Function needs event as parameter to work
    years[i].onclick = function(event) {
      var selectedYear = event.target;
      var month_list = selectedYear.nextSibling.nextSibling;
      //Showing months
      if (month_list.classList.contains('hide_months')) {
        month_list.classList.remove('hide_months');
        //Hiding months
      } else {
        month_list.classList.add('hide_months');
      }
    };
  };
}
</script>

Answer 2

我试试你的例子，它在色度方面工作得很好。我只是添加了适用于此目的的CSS。

＆＃13;

<html>
<body>
<div class="year_element">
  <h3 class="year">2015</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=2015+Marzo">Marzo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1998</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=1998+Mayo">Mayo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1987</h3>
  <ul class="hide_months months">
  </ul>
</div>
<script>
	window.onload = function() {
	var years = document.getElementsByClassName('year');
	//When doing click on a year, show months
	for (var i = 0; i < years.length; i++) {
		//Function needs event as parameter to work
		years[i].onclick = function(event) {
		var selectedYear = event.target;
		var month_list = selectedYear.nextSibling.nextSibling;
		//Showing months
		if (month_list.classList.contains('hide_months')) {
			month_list.classList.remove('hide_months');
			//Hiding months
		} else {
			month_list.classList.add('hide_months');
		}
		};
	};
	}
</script>
<style>
	.year_element{font-weight: normal;}
	.year{font-weight: bold; cursor: pointer;}
	.months{color: green;}
	.hide_months{display: none;}
</style>
</body>
</html>

＆＃13;

窗口加载后无法在javascript中运行的element.onclick事件

2 个答案: