JQuery - 通过数据属性获取 div 数组并迭代它们

Question

我有 4 个 div，并且正在构建一个导航栏，用于确定显示哪一个而隐藏其他的。导航按钮如下：

<button data-button="personalInfo">Personal Info</button>
<button data-button="vehicleInfo">Vehicle Info</button>
<button data-button="vehicleCondition">Vehicle Condition</button>
<button data-button="ownershipInfo">Ownership Info</button>

div如下：

<div data-section="personalInfo">Personal Info</div>
<div data-section="vehicleInfo">Vehicle Info</div>
<div data-section="vehicleCondition">Vehicle Condition</div>
<div data-section="ownershipInfo">Ownership Info</div>

单击按钮时，我想显示具有与按钮的 data-button 属性相对应的 data-section 属性的 div。我编写了一个函数，它将特定的数据部分作为参数，目的是循环遍历每个 div，并将 d-none 的引导类应用于除数据部分与参数匹配的那个之外的每个 div。但是，我似乎无法以允许我迭代它们的方式通过数据部分获取所有 div。这是 JQuery：

const personalInfoBtn = $(this).find('[data-button="personalInfo"]')
const vehicleInfoBtn = $(this).find('[data-button="vehicleInfo"]')
const vehicleConditionBtn = $(this).find('[data-button="vehicleCondition"]')
const ownershipInfoBtn = $(this).find('[data-button="ownershipInfo"]')

const switchFormSection = (dataSection) => {
    // All 3 of these methods do not get hold of the divs in a manner that allows me to loop over them and add/remove classes
    // const sections = $widget.attr("data-section");
    // const sections = $("div[data-section]");
    // const sections = $widget.data("section");

    sections.each(function(section){
        if(section === dataSection) {
            section.removeClass('d-none');
        } else {
            section.addClass('d-none');
        }
    })
}

personalInfoBtn.on("click", function(e) {
    switchFormSection("personalInfo");
})

vehicleInfoBtn.on("click", function(e) {
    switchFormSection("vehicleInfo");
})

vehicleConditionBtn.on("click", function(e) {
    switchFormSection("vehicleCondition");
})

ownershipInfoBtn.on("click", function(e) {
    switchFormSection("ownershipInfo");
})

任何有关如何实现这一点的帮助，或者如果有执行此功能的更智能方法，我们将不胜感激。

Answer 1

由于按钮和 div 的数据属性完全匹配，因此无需单独指定每种不同的可能性。使用按钮上的点击监听器，识别被点击元素的data-button 属性，然后您可以遍历所有<div>s 并隐藏它们，然后显示与data-button 匹配的那个：

const divs = $('[data-section]');
$('[data-button]').on('click', (e) => {
  divs.addClass('d-none');
  const name = e.target.dataset.button;
  divs
    .filter(`[data-section=${name}]`)
    .removeClass('d-none');
});

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-button="personalInfo">Personal Info</button>
<button data-button="vehicleInfo">Vehicle Info</button>
<button data-button="vehicleCondition">Vehicle Condition</button>
<button data-button="ownershipInfo">Ownership Info</button>


<div data-section="personalInfo">Personal Info</div>
<div data-section="vehicleInfo" class="d-none">Vehicle Info</div>
<div data-section="vehicleCondition" class="d-none">Vehicle Condition</div>
<div data-section="ownershipInfo" class="d-none">Ownership Info</div>