为什么我的div不交换.class工作？ [英] Why doesn't my div swap by .class work?

问题描述

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

Having trouble converting the following code from dealing with IDs to Classes.

基本上，代码的作用是显示一个div同时隐藏另一个div。

Basicly what the code does is reveals one Div while hiding another.

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

In the original version it was simple because the div location was absolute.

使用类版本，我需要根据onClick所在的DIV显示product-specs的下一个实例。

With the classes version I need to reveal the next instance of 'product-specs' based on which DIV the onClick was located.

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

NOTE/ Their are multiple versions of the same classes on the page. So references to the classes must be specific to the closest instance of the class, based on the location of the link that was clicked.

HTML：

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

Javascript：

Javascript:

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

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

However now I need to add multiple instances of product details Div & Products specs

新的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：

New Javascript:

？

推荐答案

注意:(我解释完整的代码befoe 这里，所以只是把这里更新）记住，当你的选择器是一个className，你会得到一个数组！改变这样的代码并再次测试：

Note: (I explain the complete code befoe here, so just put the updated here) remember that when your selector is a className, you will got an array! change the code like this and test again:

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"}); });
}

这篇关于为什么我的div不交换.class工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！