0

こんにちは、画像をクリックすると、slideToggle 関数を使用しています。ページに 4 つの画像があるとします。特定の画像をクリックすると、画像に関連する特定のコンテンツが表示されます。現在、画像ごとに個別に宣言した以下のスクリプトを使用して取得しました。しかし、同じ機能を備えたページに約100個の画像を含める必要があります。関数を100回繰り返すことはできませんが、これは良い習慣ではありません。関数を繰り返さずに単一のループを使用してこれを取得する方法を教えてください。 

  <script type="text/javascript">
        $(document).ready(function() {
            $(".img").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con").slideToggle("800");
        });

    });

            $(".img1").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con1").slideToggle("800");
        });

    });

            $(".img2").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con2").slideToggle("800");
        });

    });

            $(".img3").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con3").slideToggle("800");
        });

    });

            $(".img4").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con4").slideToggle("800");
        });

    });
        });
</script>

HTML

<div class="img on"></div>
<div class="hide-con">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img1 on"></div>
<div class="hide-con1">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img2 on"></div>
<div class="hide-con2">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img3 on"></div>
<div class="hide-con3">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img4 on"></div>
<div class="hide-con4">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>
4

4 に答える 4

1

クラスを1 つだけ定義imgし、今日のクラスを id として使用する必要があります。

<img class=img id=img3 src=...>

$(".img").click(function() {
    if ($(this).hasClass('on')) {
        $(this).removeClass('on').addClass('off');
    } else if ($(this).hasClass('off')) {
        $(this).removeClass('off').addClass('on');
    }
    $(".hide-con"+this.id.slice(3)).slideToggle("800"); // extracts the number from the id
});

無駄な$.readyラッパーを削除したことに注意してください。

id=hide-con3の代わりにclass=hide-con3と を使用 $("#hide-con"+this.id.slice(3))して選択することもお勧めします。

于 2013-04-04T11:57:57.153 に答える
0

forこれは、ループで行う方法です。

for (var i = 0; i < 100; i++) {
    var n = i == 0 ? '' : i;
    $(".img" + n).click(function () {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        (function (n) {
            $(function () {
                $(".hide-con" + n).slideToggle("800");
            });
        })(n);
    });
}

誰もが提案しているように、私はこのアプローチに反対し、適切なクラスベースのソリューションを使用することをお勧めします。クラスベースのソリューションの唯一の課題は、 を処理する方法です。.hide-conそれを取得する方法は、関連付けられている に対して配置されている場所によって異なります.img。

このセクションが何なのか疑問に思われるかもしれません:

(function (n) {
    $(function () {
        $(".hide-con" + n).slideToggle("800");
    });
})(n);

このラッピング機能がないと、 の値が保持されるため、すべての.imgクリックが呼び出さslideToggle()れます。これを回避するには、無名関数を呼び出して の値を与えます。関数内ではそれが独自の変数になっているため、外側の関数をインクリメントしても影響しません。.hide-con100nn

于 2013-04-04T12:02:10.103 に答える
0

属性セレクターと^演算子を試してください

$(document).ready(function() {
 $("img[class^='img']").click(function(){
    if ($(this).hasClass('on')) {
        $(this).removeClass('on').addClass('off');
    } else if ($(this).hasClass('off')) {
        $(this).removeClass('off').addClass('on');
    }

     //you don't have to wrap this in ready function again  
     $(".hide-con").slideToggle("800");
  });
});

これは、で始まるクラスを持つすべての画像を選択しますimg

于 2013-04-04T12:01:18.980 に答える
0

交換

$(function() {
        $(".hide-con3").slideToggle("800");
});

と

$(this).slideToggle("800");

これにより、すべてではなく、選択したインスタンスのみがトグルされ、すべての画像で同じクラスが使用されます。

于 2013-04-04T12:02:59.460 に答える