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

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中添加一个类，然后将当前函数包装在$('.newClass').each(function choose(that){...});中来尝试jquery。 我还尝试在父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"]

我还为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>