这里的第一个计时器是一个非常基本的问题。我需要您的帮助来修改以下代码中的JavaScript，以便第一列（id =“First Column”）显示在左侧，用于所有选定的选项。我搜索了多个线程和网站，但一直未能解决这个问题。
还想知道如果我需要在Wordpress网站上使用它，Javascript代码是否会更好地解决这个问题，或者Jquery会更好。大多数人认为JS是Wordpress的更好选择，想知道同样的问题。
我确信它是一个非常基本的查询，对此的任何帮助都将非常感激。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv {
display: none;
}
</style>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="First Column" class="inv">
<ul class="cd-features-list">
<li>Dis</li>
<li>Wea</li>
<li>Tra</li>
</ul>
</div>
<div id="content_1" class="inv">Option 1
<ul class="cd-features-list">
<li>Option 1 Dis</li>
<li>Option 1 Wea</li>
<li>Option 1 Tra</li>
</ul>
</div>
<div id="content_2" class="inv">Option 2
<ul class="cd-features-list">
<li>Option 2 Dis</li>
<li>Option 2 Wea</li>
<li>Option 2 Tra</li>
</ul>
</div>
<div id="content_3" class="inv">Option 3
<ul class="cd-features-list">
<li>Option 3 Dis</li>
<li>Option 3 Wea</li>
<li>Option 3 Tra</li>
</ul>
</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>我不认为你需要jQuery来解决这个问题。查看下面的更新脚本。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv {
display: none;
}
</style>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="First Column" class="inv">
<ul class="cd-features-list">
<li>Dis</li>
<li>Wea</li>
<li>Tra</li>
</ul>
</div>
<div id="content_1" class="inv">Option 1
<ul class="cd-features-list">
<li>Option 1 Dis</li>
<li>Option 1 Wea</li>
<li>Option 1 Tra</li>
</ul>
</div>
<div id="content_2" class="inv">Option 2
<ul class="cd-features-list">
<li>Option 2 Dis</li>
<li>Option 2 Wea</li>
<li>Option 2 Tra</li>
</ul>
</div>
<div id="content_3" class="inv">Option 3
<ul class="cd-features-list">
<li>Option 3 Dis</li>
<li>Option 3 Wea</li>
<li>Option 3 Tra</li>
</ul>
</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
// using querySelectorAll to get all matching elements
var allVisible = document.querySelectorAll('.vis'),
target = document.getElementById(this.value),
firstColumn = document.getElementById('First Column');
// iterate through all visible elements instead of just one
allVisible.forEach(function(element) {
element.className = 'inv';
});
if (target !== null) {
target.className = 'vis';
}
// show or hide first column depending on whether any option is selected
if (firstColumn !== null) {
firstColumn.className = this.value ? 'vis' : 'inv';
}
});
</script>
</body>
</html>