2

これが私がやっている簡単なことです。それぞれ「.item-1」、「.item-2」などと呼ばれるいくつかの div があります。ユーザーが「.item-1」にカーソルを合わせると、「#city-info-1」div が上にスライドします。ユーザーがホバーすると下にスライドします。私はそれを行うことを十分に知っていましたが、それをコーディングした方法が可能な限り最良の方法ではないことも十分に知っていました. 他の人がこれを行う方法に興味があるので、毎回実質的に同じコードを繰り返す必要はありません。提案に感謝します:)

    $('#city-info-1, #city-info-2, #city-info-3, #city-info-4, #city-info-5, #city-info-6, #city-info-7').hide();

    $('.item-1').hover(function() {
        $('#city-info-1').stop().slideToggle(400);
    }, function() {
        $('#city-info-1').hide();
    });

    $('.item-2').hover(function() {
        $('#city-info-2').stop().slideToggle(400);
    }, function() {
        $('#city-info-2').hide();
    });

    $('.item-3').hover(function() {
        $('#city-info-3').stop().slideToggle(400);
    }, function() {
        $('#city-info-3').hide();
    });

    $('.item-4').hover(function() {
        $('#city-info-4').stop().slideToggle(400);
    }, function() {
        $('#city-info-4').hide();
    });

    $('.item-5').hover(function() {
        $('#city-info-5').stop().slideToggle(400);
    }, function() {
        $('#city-info-5').hide();
    });

    $('.item-6').hover(function() {
        $('#city-info-6').stop().slideToggle(400);
    }, function() {
        $('#city-info-6').hide();
    });

    $('.item-7').hover(function() {
        $('#city-info-7').stop().slideToggle(400);
    }, function() {
        $('#city-info-7').hide();
    });
4

4 に答える 4

2

現在のマークアップに基づいて、start withセレクターを使用できます。

説明: 指定された文字列で始まる値を持つ、指定された属性を持つ要素を選択します。

$('div[id^=city-info]').hide();

$('div[class^=item]').hover(function() {
      var cls = $(this).attr('class').replace('item', "")
      $('#city-info' + cls).stop().slideToggle(400);
  }, function() {
      $('#city-info' + cls).hide();
});
于 2012-07-13T22:11:52.147 に答える
1

アイテムごとに一意の ID (いくつかのプレフィックスと整数、つまり「i-666」のみ) を設定し、すべてに同じクラスを設定します。

$('.item').hover(function() {
  var item_id = item.attr('id');
  $('#city-info-' + item_id).stop().slideToggle(400);
}, function() {
  $('#city-info-' + item_id).hide();
});
于 2012-07-13T22:16:20.050 に答える
0

divは複数のクラスを持つことができるので、これらのdivのそれぞれに共通のクラス名を持たせることができます

<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
...

次のように選択できます。

$('.item').hover(function() {
        ...
    }, function() {
       ....
    });

これはcssで簡単にできるように見えるので、あなたのhtmlを見せてください

于 2012-07-13T22:12:45.107 に答える
0

一般的な css クラスを使用し、特定の要素ではなく動作をそれに関連付けます。

例：

http://jsfiddle.net/K3mbE/1/

Javascript :

$('.slider').hover(function() {
  $(this).find('div').stop().slideToggle(400);
}, function() {
  $(this).find('div').hide();
});

HTML :

<div class="slider">Seattle
    <div>It rains a lot</div>
</div>
<div class="slider">New York
    <div>Greatest city on earth</div>
</div>
<div class="slider">Trantor
    <div>Greatest city in the galexy</div>
</div> 

  </p>

于 2012-07-13T22:11:19.767 に答える