Javascript 为什么'；我的div swap不是课堂作业吗？

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

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

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

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

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

HTML:

但是现在我需要添加多个ProductDetails 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：

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

---

在本机JavaScript中，您可以使用

GetElementsByCassName（）

——但它在版本8中已经升级。您可以使用专门构建的包装器脚本（如jQuery）或库（如jQuery）来抽象消除浏览器差异

在jQuery中，尝试以下操作

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}

<div>    
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

---

在本机JavaScript中，您可以使用

getElementsByCassName（）

——但它在版本8中已经升级。您可以使用专门构建的包装器脚本（如jQuery）或库（如jQuery）来抽象消除浏览器差异

在jQuery中，尝试以下操作

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}

<div>    
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

原件：

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

jQuery：

function swap3(oldDivId, newDivId) {
    var $oldDiv = $('#' + oldDivId);
    var $newDiv = $('#' + newDivId);
    $oldDiv.hide();
    $newDiv.show();
}

jQuery类：

function swap3(oldDivClass, newDivClass) {
    var $oldDiv = $('.' + oldDivClass);
    var $newDiv = $('.' + newDivClass);
    $oldDiv.hide();
    $newDiv.show();
}

原件：

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

jQuery：

function swap3(oldDivId, newDivId) {
    var $oldDiv = $('#' + oldDivId);
    var $newDiv = $('#' + newDivId);
    $oldDiv.hide();
    $newDiv.show();
}

jQuery类：

function swap3(oldDivClass, newDivClass) {
    var $oldDiv = $('.' + oldDivClass);
    var $newDiv = $('.' + newDivClass);
    $oldDiv.hide();
    $newDiv.show();
}

---

要隐藏“details”div并显示紧跟其后的div（假定为“specs”），请尝试以下jQuery片段。它将一个单击处理程序附加到每个“产品详细信息”div，当它触发时，它隐藏该div并显示其直接同级：

$(".product-details").click( function() {
    $(this).hide();
    $(this).next().show();
});

---

相反的行为（隐藏规格并显示细节）留给读者作为练习；-）

要隐藏'details'div并显示紧接其后的div（假定为'specs'，请尝试以下jQuery代码段。它将一个单击处理程序附加到每个“产品详细信息”div，当它触发时，它隐藏该div并显示其直接同级：

$(".product-details").click( function() {
    $(this).hide();
    $(this).next().show();
});

相反的行为（隐藏规格并显示细节）留给读者作为练习；-）

注意：（我在前面解释了完整的代码，所以只需将更新的代码放在这里）记住，当选择器是类名时，您将得到一个数组！像这样更改代码并再次测试：

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

注意：（我在前面解释了完整的代码，所以只需将更新的代码放在这里）记住，当选择器是类名时，您将得到一个数组！像这样更改代码并再次测试：

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中，不带任何类或id。这样对它们进行分组是有意义的，比如

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}

<div>    
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

---

希望它能起作用

您可以做的另一件事是将您的每个产品包装在一个div中，而不使用任何类或id。这样对它们进行分组是有意义的，比如

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}

<div>    
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

---

希望它能起作用

我已经在页面上使用了jQuery，所以这不会是一个问题，我已经使用jQuery选择器进行了一些尝试。以及尝试使用“this”引用。但是，如果您有多个产品规格实例，则这两个实例都将显示在该解决方案中。我需要一种方法让脚本知道事件触发的位置，并只显示下一个.product-specs.ah实例，这有点复杂。。。但是，如果您可以保证每个“细节”div后面都紧跟着相应的“规格”div，那么您可以使用同级选择器。我已经在页面上使用了jQuery，所以这不会是一个问题，我已经尝试过使用jQuery选择器。以及尝试使用“this”引用。但是，如果您有多个产品规格实例，则这两个实例都将显示在该解决方案中。我需要一种方法让脚本知道事件触发的位置，并只显示下一个.product-specs.ah实例，这有点复杂。。。但是，如果您可以保证每个“细节”div后面都紧跟着相应的“规格”div，那么您可以使用同级选择器。我喜欢您使用这个选项的方式，但它不会按原样工作，因为可能有多达5个“newDivClass”实例，我只需要显示它的下一个实例，而不需要显示所有其他实例。@PhilipK-添加ID对每种产品都要进行测试。即使是a id=“Prod###”，也可以用代码计算。听起来你是在试图识别一个要显示/隐藏的特定产品，这对类来说不是一个很好的用途。我喜欢你这样做，但它不会像现在这样工作，因为可能有多达5个“newDivClass”实例，我只需要显示它的下一个实例，而不是所有其他实例。@PhilipK-为每个产品添加一个ID。即使是a id=“Prod###”，也可以用代码计算。听起来您正试图识别要显示/隐藏的特定产品，这对于类来说不是一个很好的用途。如何指定“产品规格”的下一个实例--$（this）.next（.product specs）.show（）？我认为是这样的（你需要在

next（）

调用中加上选择器参数，就像

next（“.product specs”）

一样。如果你不确定下一个div是否是“.product specs”div，你只需要将选择器传递到next（）。如果每个“details”div后面总是跟有“specs”，那么就不需要将选择器传递到

next（）

。事实上，否：上的文档似乎说选择器用作

next（）的过滤器

——它总是找到下一个同级，但只有在与选择器匹配时才会返回。如果下一个同级与选择器不匹配，它似乎不会继续查找；相反，它不会返回任何内容。如果您不能保证规范始终遵循细节，您可以使用类似

find（）

继续查找匹配的div。这似乎很脆弱；如果对应的“spec”div与其详细信息相差几个元素，您如何知道您拥有正确的spec？如何指定“product specs”的下一个实例。-$（This）.next（.product specs）.show（）；