jQuery隐藏和显示属性源图像未按预期切换
因此，我搜索并编辑了我找到的一个显示/隐藏jquery代码，它工作得很好，只是当我单击它时html img属性不会被替换。
我的jQuery代码：
<script>
$(document).ready(function() {
var button = $('#hideButton');
//check the cookie when the page loads
if ($.cookie('currentToggle') === 'hidden') {
togglePanel(button, false);
}
else {
togglePanel(button, true);
}
//handle the clicking of the show/hide toggle button
button.click(function() {
//toggle the panel as required, base on current state
if (button.attr('src') === "images/expand.gif") {
togglePanel($(this), true);
}
else {
togglePanel($(this), false);
}
});
});
function togglePanel(button, show) {
var panel = $('#panel');
if (show) {
panel.removeClass('hidden');
button.attr('src','images/collapse.gif');
$.cookie('currentToggle', '', { path: '/' });
}
else {
panel.addClass('hidden');
button.attr('src','images/expand.gif');
$.cookie('currentToggle', 'hidden', { path: '/' });
}
}
</script>我的HTML代码：
<a id="hideButton" href="#"><img src="images/collapse.gif"></a>
<div id="panel">
<p>
Test
</p>
</div>当我查看我的firebug控制台时，它显示了a href src属性的变化，如"<a ... src="extend.gif">“，而不是实际的"<img src="">”元素本身。我该如何解决这个问题？谢谢。
回答 3
Stack Overflow用户
发布于 2013-10-09 04:40:22
要使您的函数正常工作，您需要将其更改为更新IMG元素的src属性。不是锚标签...你可以这样做：
function togglePanel(button, show) {
var panel = $('#panel');
if (show) {
panel.removeClass('hidden');
button.find('img').attr('src','images/collapse.gif');
$.cookie('currentToggle', '', { path: '/' });
}
else {
panel.addClass('hidden');
button.find('img').attr('src','images/expand.gif');
$.cookie('currentToggle', 'hidden', { path: '/' });
}
}.find('img')将返回与该参数的选择器匹配的子对象-对于您在其上调用它的元素...在本例中，存储在变量按钮中的锚定标记...
我想注意几件事:交换src属性可能是有效的，但你会注意到在较慢的互联网连接上或当图像大小变大时会出现“闪烁”。这是因为您实际上是让用户发出请求并加载该图像。
推荐的方式是像Diodeus说的那样做-利用css类，我更喜欢图像精灵-这将否定‘闪烁’，并在DOM完成加载后最大限度地减少资源加载时间。
编辑：
RafH有一个很好的观点！-你还必须更新if条件(我忽略了)来检查图像源-而不是锚定源。正如他所建议的
Stack Overflow用户
发布于 2013-10-09 04:40:37
按钮引用了一个标签，如果你想改变img src，那么你需要使用正确的选择器：
$('img',button).attr('src', 'whatever.gif');在你的代码中：
if (button.attr('src') === "images/expand.gif") {应该是：
if ($('img', button).attr('src') === "images/expand.gif") {您也需要在togglePanel函数中执行相同的操作。
Stack Overflow用户
发布于 2013-10-09 04:54:54
如果我没有正确理解您的问题，很抱歉。当点击锚点时，你想要显示/隐藏面板，当它被点击时，图像也应该改变。
为什么不为锚本身做一个布局，并使用后台url来更改它呢？
#hideButton
{
width: 25px;
height: 25px;
display: inline-block;
background: url('http://png.findicons.com/files/icons/2338/reflection/128/collapse_arrow.png');
background-size:25px 25px;
}
.reverse
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
//you can place a other image in here.
margin-bottom: 2px;
}现在我已经在点击时使用了镜像，你可以使用任何你想要的镜像。
现在是jQuery代码：
$(document).ready(function() {
$("#hideButton").click(function()
{
if($("#panel").is(":visible"))
{
$('#panel').slideUp('slow');
$('#hideButton').addClass('reverse');
}
else
{
$('#panel').slideDown('slow');
$('#hideButton').removeClass('reverse');
}
})
})我使用 SlideUp和slideDown。同样，您可以根据自己的需要对其进行更改。
最后是HTML：
<a id="hideButton" href="#" ></a>
<div id="panel">
<p>
Test
</p>
</div>https://stackoverflow.com/questions/19257724
复制相似问题
腾讯云开发者
