1

divを非表示/表示する次のコードがあります。まず、すべてを非表示にしてから、関連する1つを表示します。

$('.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つの関数を作成する方法はありますか？

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、3つの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。カルデランの回答を参照してください。

于 2012-04-20T09:45:58.927 に答える
1

もちろん。問題の要素に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 に答える