gpt4 book ai didi

javascript - 使用下拉菜单更改两个不同 Div 中的内容

转载 作者:行者123 更新时间:2023-12-03 07:26:09 25 4
gpt4 key购买 nike

我有一个下拉菜单,当用户选择一个选项时,应在下拉菜单下方填充适当的内容。这是可以实现并且有效的。但是,我希望同时更改两个部分的内容 - 前面提到的下面的一个部分和右侧的一个部分(与主题 1、主题 2、主题 3 一样)。

当我将内容设置为在下方和右侧显示时,它仅显示右侧的内容(如选择下拉选项主题 1、主题 2、主题 3 时所示)。

http://codepen.io/anon/pen/bpBpaV

我知道存在问题,因为我在两个不同的场合使用 id(一个在下拉列表下方的 div 中,一个在下拉列表右侧的 div 中)。不过,我确实将 javascript 从 document.getElementById 更改为 document.getElementByClass 并将所有 id 更改为类,因为有些 ID 使用了两次。然而,当我将 HTML/JS 更改为使用类时,JS 根本没有渲染。

是否有任何见解可以解释为什么我无法同时显示右侧和下方的内容?任何见解将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


</head>

<body>
<br><br><br>
<div class="container">
<div class="row">
<div class="col-md-6">

<!-- DROPDOWN MENU -->
<select name="dropdown" id="dropdown">
<option value="0">Select Topic</option>
<option value="1">Topic 1</option>
<option value="2">Topic 2</option>
<option value="3">Topic 3</option>
<option value="4">Topic 4</option>
<option value="5">Topic 5</option>
<option value="6">Topic 6</option>
<option value="7">Topic 7</option>
<option value="8">Topic 8</option>
<option value="9">Topic 9</option>
<option value="10">Topic 10</option>
<option value="11">Topic 11</option>
</select>
</div>

<!-- CONTENT OFF TO THE RIGHT -->
<div class="col-md-6" >

<div class="content" id="1" >
TOPIC 1 - RIGHT
</div>

<div class="content" id="2">
TOPIC 2 - RIGHT
</div>

<div class="content" id="3">
TOPIC 3 - RIGHT
</div>

</div>
</div>
</div>

<!-- CONTENT BELOW FORM -->
<div class="container">
<div class="row">
<div class="col-md-12">

<div class="content" id="0" style="display: block">
SELECT TOPIC
</div>
<div class="content" id="1">
DISPLAYING TOPIC 1
</div>

<div class="content" id="2">
DISPLAYING TOPIC 2
</div>

<div class="content" id="3">
DISPLAYING TOPIC 3
</div>

<div class="content" id="4">
DISPLAYING TOPIC 4
</div>

<div class="content" id="5">
DISPLAYING TOPIC 5
</div>

<div class="content" id="6">
DISPLAYING TOPIC 6
</div>

<div class="content" id="7">
DISPLAYING TOPIC 7
</div>

<div class="content" id="8">
DISPLAYING TOPIC 8
</div>

<div class="content" id="9">
DISPLAYING TOPIC 9
</div>

<div class="content" id="10">
DISPLAYING TOPIC 10
</div>

<div class="content" id="11">
DISPLAYING TOPIC 11
</div>

</div>
</div>
</div>


</body>
</html>

CSS

.content {
display: none;
}

JavaScript

document.getElementById('dropdown').onchange = function() {
var i = 0; //
var topicNumber = document.getElementById(i);
while(topicNumber) {
topicNumber.style.display = 'none';
topicNumber = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};

最佳答案

考虑以下forked codepen

ID 已变得唯一,并且调整了以下 Javascript

document.getElementById('dropdown').onchange = function() {
//Loop over all the topics to make them invisible
var topics = document.getElementsByClassName('content');
for (var i = 0; i < topics.length; ++i) {
var item = topics[i];
item.style.display = 'none';
}
document.getElementById("left"+(this.value)).style.display = 'block';
document.getElementById("right"+(this.value)).style.display = 'block';
};

正如 Roamer-1888 所说,您的 ID必须[在您的页面内]是唯一的,以便“唯一”识别它们。

最后,在您的案例中也不需要使用纯 JS,因为您包含了 jQuery(顺便说一句,您已经添加了相同的库 4 次)。

关于javascript - 使用下拉菜单更改两个不同 Div 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36000672/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com