1

Greetings I have been trying this for hours now and I am having trouble trying to figure it out. I am new to javascript and jquery. For example I have two images, a black and blue image. I have 4 black images that when hovered individually, changes the img src to blue, and goes back to black when hovered out. What I am trying to accomplish is that when you click the image/link, it will stay "blue". It will only change to "black" once you click on the other images.

Here is what I have so far:
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" />

Script

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");
 } 
}

Sorry if the code is messy, I'm new to this.

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 回答