0

カテゴリ名を表示しているリストアイテムをクリックすると、関連する商品カテゴリ（「product-display」div内）がfadeToggleになるように作成しようとしているeコマースサイトに取り組んでいます。私がfadeToggleしたいリストアイテムとdivの両方に、同じクラス名が割り当てられています。

jQueryを介してこれを実現するにはどうすればよいですか？

<ul id="product-filter">
 <li class="cat_1">category 1</li>  // Clicking on this li item...
 <li class="cat_2">category 2</li>
</ul>

<div id="product-display">
  <div class="cat_1">  // fadeToggles this div
    <img src="image1.gif">
</div>

  <div class="cat_2">
    <img src="image2.gif">
  </div>
</div>
4

3 に答える 3

0 
$('#product-filter li[class^=cat_]').click(function()
{
    $('#product-display div[class=' + $(this).attr('class') + ']')
        .fadeIn(); // or whatever fade logic you need
});
于 2012-07-14T11:43:51.810 に答える
0

おそらくこのようなもの：

$('#product-filter li').click(function() {
    $('#product-display div.' + $(this).attr('class')).fadeToggle();
});

つまり、li要素の1つをクリックすると、そのクラスが取得され、「product-dislay」内で適切な一致するアイテムが選択されます。

そうは言っても、それが私のコードである場合、アイテムをリンクするためにクラスを使用しません。これは、li要素に他のクラスを適用するのが難しいためです。代わりにデータ属性を使用する可能性があります。製品divの場合、IDは一意のアイテムのように見えるため、おそらくIDを使用します。

<ul id="product-filter">
   <li data-category="cat_1">category 1</li>
   ...

<div id="product-display">
    <div id="cat_1">

$('#product-filter li').click(function() {
    $('#' + $(this).attr('data-category')).fadeToggle();
});

また、おそらくli要素の中にアンカー要素を配置します。これは、キーボードを介して「クリック」できるためです（マウスやその他のポインティングデバイスを使用できない、または使用しないユーザー向け）。

于 2012-07-14T12:00:44.117 に答える
0

これはどう：

$('#product-filter').find('li').each(function() {
    $(this).click(function() {
        var item = $(this).attr('class');
        $('#product-display').find('.'+item).fadeToggle();
    });
});
于 2012-07-14T18:24:38.797 に答える