Question

这个问题看起来很简单，所以 mea culpa 提前知道，如果问这个礼仪很差。

我在选项卡面板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' mainpic '拥有一个img。第二个“ mainpicblurb ”包含子div“ piclinks ”中的文字和链接。 Div' altpic '为空且隐藏（显示：无），但除此之外是'mainpic'的精确副本。

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

隐藏'mainpic'
抓取href（img src）并将其作为img src添加到'altpic'
显示'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，然后使用parent（）和siblings（）来回溯树，以便收集#mainpic和#altpic。

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

汤姆

Answer 1

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

<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;}

并删除display：none;对于#altpic

Answer 2

你应该使用

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

否则你隐藏/显示div

div显示问题

2 个答案: