1

ご挨拶 私はこれを何時間も試みてきましたが、それを理解するのに苦労しています. 私はjavascriptとjqueryが初めてです。たとえば、黒と青の 2 つの画像があります。個別にホバーするとimg srcが青に変わり、ホバーアウトすると黒に戻る4つの黒い画像があります。私が達成しようとしているのは、画像/リンクをクリックすると、「青」のままになることです。他の画像をクリックすると、「黒」に変わります。

これが私がこれまでに持っているものです:
HTML

<a id="catlnk1" href="javascript:void(0);" onclick="loadCat(1)"><img src="/images/blogpage/published.png" onmouseover="this.src='/images/blogpage/published-active.png'" onmouseout="this.src='/images/blogpage/published.png'" alt="Published" />

脚本

function loadCat(num)
 { if (num == 1){
 $("#catlnk" + num).attr("src","/images/blogpage/published-active.png");
 } else if (num == 2){
 $("#catlnk" + num).attr("src","/images/blogpage/upcoming-active.png");
 } else if (num == 3){
 $("#catlnk" + num).attr("src","/images/blogpage/opening-active.png");
 } else if (num == 4){
 $("#catlnk" + num).attr("src","/images/blogpage/job-active.png");
 } 
}

コードが乱雑な場合は申し訳ありませんが、私はこれが初めてです。

4

1 に答える 1

1

イベントをインラインでバインドすることはお勧めできません。機能を設計から分離し、javascript または jQuery を使用してイベントをバインドします。

表示する画像を保持するHTML-5というデータ属性を使用しています。data-image

したがって、HTML は次のようになります。

HTML

<a id="catlnk1" href="javascript:void(0);">
    <img data-image="published" src="/images/blogpage/published.png" alt="Published" />
</a>
<a id="catlnk2" href="javascript:void(0);">
    <img data-image="upcoming" src="/images/blogpage/upcoming.png" alt="Upcoming" />
</a>
<a id="catlnk3" href="javascript:void(0);">
    <img data-image="opening" src="/images/blogpage/opening.png" alt="Opening" />
</a>
<a id="catlnk4" href="javascript:void(0);">
    <img data-image="job" src="/images/blogpage/job.png" alt="Job" />
</a>

JS

var url = "/images/blogpage/";
$('[id^=catlnk]').on({
    click: function (e) {
        var $currImg = $(this).find('img');
        $currImg.attr('src', function (_, src) {
            return url + $(this).data('image') + '-active.png';
        });

        // All images 
        $allImages = $('a > img');
        $allImages.not($currImg).each(function () {
            $(this).attr('src', function (_, src) {
                return url + $(this).data('image') + '.png';
            });
        });
        $currImg.addClass('clicked');
        $allImages.not($currImg).removeClass('clicked');
    },
    mouseover: function () {
        var $img = $(this).find('img');
        $img.attr('src', function (_, src) {
            return url + $(this).data('image') + '-active.png';
        });
        $img.addClass('active');
    },
    mouseleave: function () {
        var $img = $(this).find('img');
        $img.attr('src', function (_, src) {
            return url + $(this).data('image') + '.png';
        });
        $img.removeClass('active');
    }

})

デモを確認

于 2013-08-08T04:20:53.567 に答える