Question

嗨朋友在点击链接后尝试更改图像但未能做到。场景是我建立一个菜单，每个标签都有不同的灰色图像，当用户点击时，灰色图像会变成白色，当用户点击另一个标签时，早期白色图像会变回灰色，新图像会变成灰色白色，您可以查看下面的代码或 can see fiddle here

HTML

<ul data-role="list-divider" class="footerMenu">
        <li><a href="#">
        <img src="http://s16.postimg.org/6fnxrzxu9/friends_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/7j823yihd/friends_Iconwh.png" width="114" height="77" alt=" " class="active"/><br />
          Friends</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/5we94zh1t/cards_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/mivte29zl/cards_Iconwh.png" width="114" height="77" alt=" " class="active" /><br />
          Cards</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/vt7xhlkpd/egreeting_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/lacj667f5/egreeting_Iconwh.png" width="114" height="77" alt=" "  class="active"/><br />
          Egreeting</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/hukewma6p/post.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/nk0ngxgcx/postwh.png" width="114" height="77" alt=" " class="active" /><br />
          Post</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/4jwk33jm9/custom_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/qkcwjq2a9/custom_Iconwh.png" width="114" height="77" alt=" "  class="active"/><br />
          Custom</a></li>
      </ul>

SCRIPT

$('.footerMenu li a').on('click', function () {


    $('.footerMenu li a').children('img.active').each(function(index, element) {
        $(this).css('display','none');
    });

    //$('.footerMenu li a img.active').hide();  
    //$(this).children('img').css('display','none');
    $(this).children('img.active').css('display','inline');

    if($(this).children('img:not(.active)').css('display')== 'none')
    {   $(this).children('img:not(.active)').css('display','inline');
        }
        else

    {   $(this).children('img:not(.active)').css('display','none');
            }


})

CSS

body{background:red;}
.footerMenu img.active{display:none;}

请帮帮我们......谢谢提前：）

Answer 1

尝试

var $as = $('.footerMenu li a'), $imgs = $as.find('img');
$as.on('click', function () {
    var $this = $(this), $cimgs = $this.find('img');
    $as.find('img:first-child').removeClass('active');
    $as.find('img:gt(0)').addClass('active');
    $cimgs.eq(1).removeClass('active');
    $cimgs.eq(0).addClass('active');
})

演示：Fiddle

使用jQuery无法正常更改click（）上的图像

1 个答案: