1

ここに私が取り組んでいる私のウェブサイトがあります: http://jaakkouusitalo.fi/newご覧のとおり、4 つの色付きの四角形があり、すべてが異なるクラスを持っています。

if ステートメントと else ステートメントを作成して、単純化したいと思います。何をすべきかを知るスキルが不足しているため、ここで直接質問することにしました。

これが私のhtmlファイルです：

    <section>
        <h2>Color combination should be following:</h2>
        <ul class="colors">
            <li class="color-img1">
                <img src="img/1.png" />
                <div class="caption1">
                    #FFD800
                    </div>
                </li>

                <li class="color-img2">
                    <img src="img/2.png" />
                    <div class="caption2">

                    </div>
                </li>

                <li class="color-img3">
                    <img src="img/3.png" />
                    <div class="caption3">
                        #587498
                    </div>
                </li>

                <li class="color-img4">
                    <img src="img/4.png" />
                    <div class="caption4">
                    #E86850
                    </div>
                </li>
            </ul>
        </section>

現在、私は次のようにjQueryを処理しています：

$( document ).ready(function() {

            $('.caption1, .caption2, .caption3, .caption4').hide();

            $(".color-img1").hover(function() {
                $('.caption1').show();
            });

            $(".color-img2").hover(function() {
                $('.caption2').show();
            });

            $(".color-img3").hover(function() {
                $('.caption3').show();
            });

            $(".color-img4").hover(function() {
                $('.caption4').show();
            });
        });

これを作る良い方法があると思います。方法がわかりません。

4

5 に答える 5

0

使用する：

  $(".color-img1,.color-img2,.color-img3,.color-img4").hover(function() {
        idnum=$(this).attr('class').replace( /^\D+/g, '').replace(/[^a-zA-Z ]/g, "")                
        class="caption"+idnum;
        $('.'+class).show();
        });
于 2014-01-23T10:27:13.590 に答える
0

第一歩

CSS を使用して .captionX を非表示にdisplay:none;すると、元の hide ステートメントは不要になります。

ステップ2

単一のバインド$(".colors img").hover(function() {}を使用してから、または類似のものを使用して「ホバー」されているオブジェクトに関連するキャプションを表示します$(this).parent("li").children(".caption").show()。

于 2014-01-23T10:31:24.327 に答える
0

単に：

$("ul.colors").children('li').hover(function() {
    $(this).children('div[class^="caption"]').show();
});

このホバー機能は、 ;のいずれかliの子にホバーするとアクティブになります。次に、「キャプション」で始まるクラスを持つ可能性のある子要素ul.colorsを呼び出しますshow()。divli

または、jQuery のon()メソッドを利用することもできます。

$("ul.colors").on('mouseover', 'li', function() {
    $(this).children('div[class^="caption"]').show();
});
于 2014-01-23T10:31:28.640 に答える