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

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() 循环，但无济于事。我通过在每个元素的父 div 中添加一个类来尝试 jquery，并将我当前的函数包装在 $('.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 attribute selector，以id 结尾的兄弟为目标选项索引：

[id$="option1"]

我还为选择的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>