Question

我的页面上的每个“有效”和“无效”链接都有两个单独的图像。每个链接都会在我的网页上切换不同的文章。

<img src="/img/active.png" />
<img src="/img/inactive.png" />

我最初在我的页面上显示所有非活动图像，但希望显示与用户点击的链接相对应的active图像。

注意* 每个有效和无效的链接都会有唯一图片网址

<a href="#">
    <div>
        Click here for foo
        <img src="/img/inactive-123.png" />
    </div> 
</a>

<a href="#">
    <div>
        Click here for bar
        <img src="/img/inactive-345.png" />
    </div> 
</a>

我的网页上可能会有100多个链接，所以我正在寻找效率最高的链接。可维护的方式在jquery中执行此操作。我曾想过用数字索引这些图像，但这很容易导致我的文章之间的不正确关联 - 任何想法？

Answer 1

你可以在没有jQuery的情况下完成这个。我假设<a>中的元素结构与你写的相同。但您可以创建一个函数，该函数将this（元素）和src取代内部img标记。当然，您需要编辑该函数，以便更安全地处理错误，例如：索引超出范围异常。

activateImg = function (elm, imgSrc) {
	elm.children[0].children[0].src = imgSrc;
}

<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20FOO&w=350&h=150')">
    <div>
        Click here for foo
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20FOO&w=350&h=150" />
    </div> 
</a>

<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20BAR&w=350&h=150')">
    <div>
        Click here for bar
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20BAR&w=350&h=150" />
    </div> 
</a>

编辑：

如果要来回交换图像，只需传入两个图像链接并交换，具体取决于哪一个是当前src。 http://plnkr.co/edit/LUDZEQF1AHXEZ7L83Fyb?p=preview

Edit2：我刚刚重新阅读你的评论，我认为一次只能激活一张图片。为此，您可以使用属性来管理data-active之类的状态。我很快就会有一个例子。

Answer 2

很抱歉清楚JS，而不是你提到的JQuery

var tab = document.getElementsByTagName("img");
for (var i = 0; i < tab.length; i++){
    tab[i].addEventListener('click', function () {
            if (this.src.indexOf("inactive") !== -1){
                this.src = this.src.substring(0, this.src.length -12)
                this.src += "active.png"
            }
            else {
                this.src = this.src.substring(0, this.src.length -10)
                this.src += "inactive.png"
            }
    })
}

只要inactive.png或active.png位于src值的末尾，它就会起作用。

Answer 3

如果您的链接路由到另一个页面，则以下内容应该有效：

$(function () {
  var pathname = window.location.pathname.replace(/\//g, "");
  $('a[href=' + pathname + '] img').attr('src', "/img/active.png");
});

或者您是否需要更改图像而不刷新页面？

Answer 4

我想出了一个我很满意的简单解决方案;我在每个图片上创建了两个data属性

<img 
    src=""
    data-inactive-src="/inactive-123.png"
    data-active-src="/active-123.png"
/>
<img 
    src=""
    data-inactive-src="/inactive-345.png"
    data-active-src="/active-345ng"
/>

然后，当需要将活动图像交换为非活动图像时，我会这样做

var currentIcon = $("#link-"+target).find('a div img') // don't worry about this line
var allIcons = $('a div img');

/** This section SHOULD keep track of the last 
    icon changed and change it back to inactive instead of looping through each element**/
allIcons.each(function(index) {
    $(this).attr("src", $(this).data("inactive-src"));
});

/** Set the active icon image for the current target **/
currentIcon.attr("src", currentIcon.data("active-src"));

必须换出each()循环，但这使我可以完美控制活动/非活动图像。如果你发现任何瑕疵请告诉我！

单击以切换活动和非活动图像

4 个答案: