如何在页面中的每个元素上独立调用函数

Question

对于数据库中的每个元素，我都会创建一个单独的缩略图来显示。我有一个下拉菜单，根据用户的选择，我想使用一个函数显示不同的表单，但该函数只适用于页面中的第一个元素。当我对第二个、第三个元素进行选择时，该选择会影响第一个元素，而不会影响其对应的元素。我如何解决这个问题，使得当我对第一个元素进行选择时，它会影响第一个元素，对第二个元素的选择会影响第二个元件，依此类推？我的代码现在看起来像这样(在下面的例子中，元素是硬编码的，但在我的实际代码中，元素来自数据库，并显示在循环中)：

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function choose(that) {
if (that.value == "option1") {
document.getElementById("option1").style.display = "block";
document.getElementById("option2").style.display = "none";
} else {
document.getElementById("option1").style.display = "none";
document.getElementById("option2").style.display = "block";
}
}
</script>

我已经尝试过使用jquery each()循环，但没有成功。我尝试了jquery，在每个元素的父div中添加一个类，并将当前函数封装在$('.newClass').each(function choose(that){...});中。我还尝试在父div中使用新类获取所有元素，然后循环遍历它们，并在每次迭代中调用当前函数，但没有成功。类似于：let elements = document.querySelectorAll('.newClass');，然后是for(let i = 0; ...){function choose(that){...}}。我也尝试过不使用循环，而是使用jquery来获取某个类的下一个元素，并在代码中使用类而不是id。我认为这是最好的方法，但我无法让它发挥作用。我使用类而不是id的新函数看起来像：

function choose(that) {
if (that.value == "option1") {
$(this).closest('.option1').style.display = "block";;
$(this).closest('.option2').style.display = "none";
} else {
$(this).closest('.option1').style.display = "none";
$(this).closest('.option2').style.display = "block";
}
}

请帮忙，我该怎么做？

Answer 1

错误是id属性重复。我所做的是基于section-name:对它们进行预编码

• first-section-option1
• first-section-option2
• second-section-option1
• second-section-option2

并使用CSS属性选择器，以id结尾的所需选项索引作为同级对象

[id$="option1"]

我还为select的id属性加了前缀，但这无关紧要。

下面的工作示例：

function choose(that) {
var $select = $(that);
if (that.value == "option1") {
$select.siblings('[id$=option1]').show();
$select.siblings('[id$=option2]').hide();
} else {
$select.siblings('[id$=option2]').show();
$select.siblings('[id$=option1]').hide();
}
}

.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="first-element-tipo">Make a selection:</label>
<select id="first-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="first-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="first-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="second-element-tipo">Make a selection:</label>
<select id="second-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="second-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="second-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>