Question

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

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

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

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

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

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＆amp;产品规格

新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

注意:(我解释完整的代码befoe here，所以只需将更新的内容放在此处）记住当你的选择器是className时，你将得到一个数组！像这样更改代码并再次测试：

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

Answer 2

在原生JavaScript中，您使用getElementsByClassName() - 但它是not supported in IE到版本8.您可以使用专用的包装脚本，如this one，或使用库像jQuery一样抽象出浏览器的差异。

在jQuery中，尝试类似

的内容

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

Answer 3

要隐藏'details'div并显示紧随其后的div，假设为'specs'，请尝试使用此jQuery代码段。它为每个'product-details'div附加了一个click处理程序，当它触发时，它会隐藏该div并显示它的直接兄弟：

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

反向行为（隐藏规范并显示细节）留给读者练习; - ）

Answer 4

原件：

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

Answer 5

您可以做的其他事情是将您的每个产品包装在一个没有任何类或ID的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>
    <div class="product-details">

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

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

请注意额外的换行div。现在，您可以使用父元素来标识您必须显示的产品规格。例如:(也许有更好的方法）

$('.product-details').click(function() {
    // Find the specs to show
    var $specs = $(this).siblings('.product-specs');
    // Hide the other ones
    $('.product-specs').not($specs).hide();
    // Show the one that you want
    $specs.show();
});

希望它有效！

为什么我的div不能通过.class交换？

5 个答案: