如何在jQuery的一种方法中使用show()和hide()使三个重复的if条件?

Question

Use jquery-3.4.1.min.js

我使用 if-elseif 根据下面的选择显示不同的 id 值。 加载页面时，默认情况下显示 id1。 但正如您所看到的，除了根据选择显示哪一个之外，还有重复项。所以想知道是否有办法只使用一个，除了三个，如果不是的话？

$("#id1").show();
$("#id2").hide();
$("#id3").hide();
$('.id-select').on('change', function() {
if ( this.value == '1') {
$("#id1").show();
$("#id2").hide();
$("#id3").hide();
}
else if( this.value == '2') {
$("#id1").hide();
$("#id2").show();
$("#id3").hide();
}
else if( this.value == '3') {
$("#id1").hide();
$("#id2").hide();
$("#id3").show();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my-select">
<option value="1">id1</option>
<option value="2">id2</option>
<option value="3">id3</option>
</select>

Answer 1

您可以使用 开头^动态获取控件。所以像...

$('.id-select').on('change', function(){
$("[id^='id']").hide()// hide all of them
$("#id" + $(this).val()).show()// show the one with the correct value
});

显然，这是基于您的控件 ID 具有相同命名约定的假设。

有关 jquery 文档的更多信息...https://api.jquery.com/attribute-starts-with-selector/

Answer 2

是的，有一种更简单的方法。这是一个工作的小提琴。 您可以向要切换的所有元素添加一个额外的类@Sean或使用 T 的选择器。这完全取决于您的 HTML 标记。

下面是一个示例

.HTML

<select class="my-select">
<option value="1" selected="selected">id1</option>
<option value="2">id2</option>
<option value="3">id3</option>
</select>
<div id="id1" class="box">ID #1</div>
<div id="id2" class="box">ID #2</div>
<div id="id3" class="box">ID #3</div>

.JS

$('.my-select').on('change', function() {
var value = $(this).val(); //get the value
$('.box').hide(); //hide all of them
$('#id' + value).show(); //show the correct one
});
$('document').ready(function() {
//trigger the change to run the process once
$('.my-select').trigger('change');
});

Answer 3

将选定的选项值传递到 id 选择器标记中：

$(document).ready(function() {
$("#id1").show();
$("#id2, #id3").hide();
$('.my-select').on('change', function() {
$("#id1, #id2, #id3").hide();
$("#id" + this.value).show();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my-select">
<option value="1">id1</option>
<option value="2">id2</option>
<option value="3">id3</option>
</select>
<div id="id1">ID 1</div>
<div id="id2">ID 2</div>
<div id="id3">ID 3</div>

使用纯Javascript：

$(document).ready(function(){
const divs = document.querySelectorAll("[id^=id]");
divs.forEach((el, idx) => el.style.display = idx === 0 ? "block" : "none");

document.querySelector(".my-select").addEventListener("change", (e) => {
divs.forEach((el, idx) => el.style.display = e.target.value == ++idx ? "block" : "none");
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my-select">
<option value="1">id1</option>
<option value="2">id2</option>
<option value="3">id3</option>
</select>
<div id="id1">ID 1</div>
<div id="id2">ID 2</div>
<div id="id3">ID 3</div>

Answer 4

有几种方法可以做到这一点，我个人使用类作为 css，但有许多不同的选择，这真的取决于你的 html。

.html

<div class="item item-1 active">test</div>
<div class="item item-2">test</div>
<div class="item item-3">test</div>

.css

<style>.item {display:none;} .item.active {display: block;}</style>

jquery

$(document).ready(function(){
$('.id-select').on('change', function() { 
$('.item').removeClass('active'); 
$('.item-'+$(this).val()).addClass('active') 
}):
});