Question

使用以下代码。我有2张图片。加减。点击加号图片应更改为减号。但这里的形象并没有改变。

 <script type="text/javascript">
    $(document).ready(function () {
    $("#plus").click(function () {
        if ($('#divreg').is(":hidden")) {
            $('#divreg').show(500);
            document.getElementById('plus').src = "~/Styles/min.jpg";
        } else {
            $("#divreg").hide(500);
            document.getElementById('plus').src = "~/Styles/plus.jpg";
        }
    });
});

Answer 1

没有通过JSFiddle或类似的方式看到你的HTML，我确实看到了一个问题。您正在使用服务器URL：

~/Styles/min.jpg

这是由ASP.NET运行时解析而不是由JQuery解析，因此您的图像路径不正确。更改此路径以测试它并查看是否有效。如果没有，你有其他错误，应该在JSFiddle上为它创建一个测试用例以获得更多帮助。

Answer 2

这是我的小提琴http://jsfiddle.net/ponrajpaul/BwGTn/

让你的html像这样

<div id="plus">
    <a class="plus minus"></a>    
</div>

让你的css像这样

#plus a{display:block; width:128px; height:128px;}
#plus .plus{background: url("http://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Alarm-Plus-icon.png") no-repeat;}
#plus .minus{display:block; background:url("http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/128/Math-minus-icon.png") no-repeat;}

让你的剧本像这样

$(document).ready(function () {
    $("#plus a").click(function () {
        if ($(this).hasClass('minus')){  
            $(this).removeClass("minus");              
        }else{
            $(this).addClass("minus");              
        }
    });
});

单击jquery时图像更改

2 个答案: