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

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

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

How can I call a function independently on each element in a page?

html

javascript

jquery

node.js

handlebars.js