jQuery函數取代臃腫的代碼

Question

我有以下代碼來隱藏/顯示divs.First所有我隱藏它們，然後我顯示相關的一個。

$('.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？

產品1將控制PRO1 產品2將控制PRO2

等等 - 在年底的數字將始終是一致的。

乾杯， 史蒂夫

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

Answer 2

添加另一個類，您的三個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(); 
    }); 
}); 

RE-EDIT：誤解，請參閱F. Calderan答案。

Answer 3

當然。如果您知道有問題的元件將只對他們有一個類（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 4

我不會這樣做。所有的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"> 
}); 

Answer 5

如果選中了一些屬性的所有相關要素（說 '數據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(); 
});