div显示问题

Question

这个问题看起来很简单，所以如果不礼貌请提前认错。

我在设置为显示的选项卡面板 div 中有一些 div。

<div id="fragment-5a" class="ui-tabs-panel" style="display: block;">
    <div id="mainpic">
    <img align="middle" alt="somewhere" 
    src="http://localhost/gopag3/projects/somest.jpg"></div> 
<div id="altpic"><img src="#"></div> 
<div id="mainpicblurb">texttexttext</div></div>

一个 div 'ma​​inpic' 包含一个 img。第二个 'ma​​inpicblurb' 包含子 div 'piclinks' 内的文本和链接。 Div 'altpic' 为空且隐藏（显示：无），但除此之外是 'mainpic' 的精确副本。

我正在尝试编写一个执行以下操作的脚本：

1. 隐藏“主图”
2. 抓取 href (img src) 并将其作为 img src 添加到 'altpic'
3. 显示“altpic”

这就是我所做的。

$(document).ready(function() {
    $('#piclinks div a').click(function() {
        var link = $(this).attr('href');
        $('#mainpic').hide();
        $('#altpic img').replaceWith('<img align="middle" src="' + link + '">');
        $('#altpic').show();
    return false;
    }); 
});

这在整体上不起作用。成功抓取href。 img src 成功转储到 'altpic' 和 'return false' 工作正常，但 'mainpic' 或 'altpic' 都没有正确的显示属性。

这可能是标签 CSS 覆盖了我所做的任何事情，尽管在 Firebug 中查看它我看不出如何。

很可能上面是一长串的嚎叫。我的直觉是选择过程是错误的。我需要从#piclinks div 遍历DOM，然后备份树以收集#mainpic 和#altpic，可能使用parent() 和siblings()。

无论如何，欢迎提出建议/理解批评。

汤姆

Answer 1

你应该使用

    $('#mainpic img').hide();
    $('#altpic img').show();

否则您将隐藏/显示 div

Answer 2

隐藏给定 id 的 CSS 可能是个问题。尝试为 altpic 添加一个隐藏类：

<div id="fragment-5a" class="ui-tabs-panel" style="display: block;">
    <div id="mainpic">
    <img align="middle" alt="somewhere" 
    src="http://localhost/gopag3/projects/somest.jpg"></div> 
<div id="altpic" class="is-hidden"><img src="#"></div> 
<div id="mainpicblurb">texttexttext</div></div>

然后继续删除类以使 div 可见：

$(document).ready(function() {
    $('#piclinks div a').click(function() {
        var link = $(this).attr('href');
        $('#mainpic').hide();
        $('#altpic img').attr({'align':"middle",'src':link});
        $('#altpic').removeClass('is-hidden')
    return false;
    }); 
});

在 CSS 中添加：

.is-hidden {display:none;}

并删除显示：无；对于#altpic