1

2 つの div セットがあります。1 つは「メイン」div で、もう 1 つは「追加」div です。これらの両方に、CMS 経由で取り込まれるクラスがあります。

クリックされた div に対応するクリック時に各 div を表示/非表示 (できれば slideToggle) する最良の方法は何ですか?

<div class="each-business-content-main" data-id="group-1"></div>
<div class="each-business-content-main" data-id="group-2"></div>
<div class="each-business-content-extra group-1"></div>
<div class="each-business-content-extra group-2"></div>

これらの 'group-1' または 'group-2' クラスは事前に知られていないため、ハードコードすることはできません。それらは同じクラス名を共有します)。

私はこれまでにこれを試しました：

$('.each-business-content-main').on('click', function (e) {
        e.preventDefault();
    var id = $(this).data('id');
    jQuery('.each-business-content-extra').slideUp();
    jQuery('.each-business-content-extra .' + id).slideDown();
});

しかし、hrefs と id が役に立つと思いますか? または他のデータID...

4

4 に答える 4

0

これを置き換えてみましたか：

jQuery('.each-business-content .' + id).slideDown();

...これとともに：

jQuery('.each-business-content #' + id).slideDown();

jQuery はクラス名を として.classname、ID を として選択し#idます。

于 2013-09-10T15:38:53.827 に答える
0

jsFiddle でこのコードを試すことができますか? グループ 1 とグループ 2 は必要ありません。ID の名前の代わりにインデックスを使用します。それでよろしいですか？

$('.each-business-content-main').on('click', function (e) {
    $('.each-business-content-extra').(':eq(' + $(this).index() + ')').slideDown();
    $('.each-business-content-extra').not(':eq(' + $(this).index() + ')').slideUp();
});
于 2013-09-10T16:17:56.313 に答える