1

我有以下代码来隐藏/显示 div。首先我将它们全部隐藏，然后显示一个相关的。

$('.cart').children().hide();                                                           

$('.product1').click(function() {
    $('.cart').children().hide();               
    $('.pro1').show();
});

$('.product2').click(function() {
    $('.cart').children().hide();               
    $('.pro2').show();
});

$('.product3').click(function() {
    $('.cart').children().hide();  
    $('.pro3').show();
});

有没有一种方法可以让我创建一个函数，该函数接受一个正在单击的类的输入并显示相关的 div？

product1 将控制 pro1 product2 将控制 pro2

依此类推 - 最后的数字将始终保持一致。

干杯，史蒂夫

4

5 回答 5

3

如果您使用某个属性（例如“data-id”）标记所有相关元素：

<a class="product" data-id="1">...</a>
<a class="product" data-id="2">...</a>
<a class="product" data-id="3">...</a>
...
<div class="cart">
   <div class="pro" data-id="1">...</div>
   <div class="pro" data-id="2">...</div>
   <div class="pro" data-id="3">...</div>
</div>

那么这应该工作：

$('.product').click (function() {
   $('.cart').children().hide();
   $('.pro[data-id="' + $(this).attr('data-id') + '"]').show();
});
于 2012-04-20T09:54:28.643 回答
1 
var children = $('.cart').children(); 
children.hide().click(function() {
    /* assuming classes are in the form of product1... product<n> */
    var index = $(this).attr('class').replace(/^product/, '');

    children.hide();               
    $('.pro' + index).show();
});
于 2012-04-20T09:45:44.583 回答
1

.product1为您的三个 HTML 元素中的每一个添加另一个类，例如，.product2然后尝试：.product3common-class

$('.common-class').click(function() {
    $('.cart').children().hide();               
    $(this).show();
});

编辑：或者甚至更好，没有添加类，这也应该工作：

$('.cart').children().each(function() {
    $(this).click(function() {
        $('.cart').children().hide();
        $(this).show();
    });
});

重新编辑：被误解了，见 F. Calderan 的回答。

于 2012-04-20T09:45:58.927 回答
1

当然。如果您知道所讨论的元素将只有一个类（product1等），那么：

$('.cart').children().hide();                                                           
$('.product1, .product2, .product3').click(function() {
    var num = this.className.substring(7);
    $('.cart').children().hide();               
    $('.pro' + num).show();
}

如果他们也可能有其他类（更可能的情况）：

$('.cart').children().hide();                                                           
$('.product1, .product2, .product3').click(function() {
    var classes = this.className.split(' ');
    $.each(this.className.split(' '), function(index, cls) {
        var num;
        if (cls.substring(0, 7) === "product") {
            num = cls.substring(7);
            $('.cart').children().hide();               
            $('.pro' + num).show();
        }
    }
}

但我可能会考虑重构一下。也许是给出产品编号的product类和data-num属性：

<div class="product" data-num="1">Product 1</div>

...这使得它更容易：

$('.cart').children().hide();                                                           
$('.product').click(function() {
    var num = $(this).attr('data-num');
    $('.cart').children().hide();               
    $('.pro' + num).show();
}

data-*以前缀开头的属性对任何元素都有效。

于 2012-04-20T09:46:09.727 回答
1

我不会这样做。所有的productx都是类product，因此都应该有类product，并且应该以另一种方式引用产品 ID/编号。

我会使用rel属性：

<div class="product" rel="1">Product 1</div>
<div class="product" rel="2">Product 2</div>
<div class="product" rel="3">Product 3</div>

现在你可以这样做：

$('.product').click(function(){
  var rel = $(this).attr('rel');
  $('.cart').children().hide();
  $('.pro'+rel).show();
  // this is for show however
  // as above I probably wouldn't
  // use the class to reference
  // these elements. Classes can
  // be applied to many elements.
  // I would use id rather than
  // class. e.g. <div id="pro1">
});
于 2012-04-20T09:48:24.173 回答