javascript - 为什么我的 div 按 .class 交换不起作用？

Question

无法将以下代码从处理 ID 转换为类。

基本上代码所做的是显示一个 Div 而隐藏另一个。

在原始版本中它很简单，因为 div 位置是绝对的。

对于类版本，我需要根据 onClick 所在的 DIV 显示下一个“产品规范”实例。

注意/编辑:它们是页面上相同类的多个版本。因此，根据单击的链接的位置，对类的引用必须特定于类的最近实例。

HTML:

<div id="product-details">
    <area shape="rect" onClick="swap3('product-details','product-specs');">
</div>
<div id="product-specs">
    <p>Content</p>
</div>

Javascript:

function swap3(oldDivId, newDivId) {
    var oldDiv = document.getElementById(oldDivId);
    var newDiv = document.getElementById(newDivId);
    oldDiv.style.display = "none";
    newDiv.style.display = "block";
}

但是现在我需要添加产品详细信息 Div 和产品规范的多个实例

新的 HTML:

<div class="product-details">
    <area shape="rect" onClick="swap3('product-   details','product-specs');">
</div>

<div class="product-specs">
    <p>Content</p>
</div>


<div class="product-details">
    <area shape="rect" onClick="swap3('product-   details','product-specs');">
</div>
<div class="product-specs">
    <p>Content</p>
</div>

新的 Javascript:

????????

Answer 1

注意:(我在 here 之前解释了完整的代码，所以只把更新的放在这里)记住当你的选择器是一个类名时，你会得到一个数组!像这样更改代码并再次测试:

function swap3(currentDivId ,oldDivId, newDivId) {
    var oldDiv = $(currentDivId).nextAll("div." + oldDivId);
    var newDiv = $(currentDivId).nextAll("div." + newDivId);
    $(oldDiv).each(function(){ $(this).css({"display" : "none"}); });
    $(newDiv).each(function(){ $(this).css({"display" : "block"}); });
}