Question

我有以下代码来隐藏/显示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

等等 - 最后的数字总是一致的。

干杯，史蒂夫

Answer 1

如果您使用某个属性标记所有相关元素（例如'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();
});

Answer 2

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

Answer 3

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

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

编辑：或者甚至更好，没有添加课程，这也应该有效：

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

重新编辑：误解，请参阅F. Calderan的答案。

Answer 4

不确定。如果您知道相关元素仅上有一个类（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-* prefix开头的属性对任何元素都有效。

Answer 5

我不会这样做。所有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">
});

jQuery函数替换膨胀代码

5 个答案: