javascript选择,图像下面的文字没有出现

时间:2013-04-02 12:06:04

标签: javascript

我遇到了一些代码和旧js的问题。我复制了网页并更改了代码,但是当在新文件中选择了相应的缩略图时,文字没有出现在大图片下面:http://jsfiddle.net/dEW75/

                            <script type="text/javascript">
    function swapImage(imgID)
    {
        var itemImage   = document.getElementById('itemImage');
        var itemText    = document.getElementById('itemText');
        var itemCaption = document.getElementById('itemCaption');

        itemImage.src =              "images/finishing_touches/color_stain/textured/textured" + imgID + "_sm.jpg";

            if(imgID == 1)
            {
                itemText.innerHTML    = 'Latitude East';
                itemCaption.innerHTML = ''};

            if(imgID == 2)
            {
                itemText.innerHTML    = 'Summer Breeze';
                itemCaption.innerHTML = ''};

            if(imgID == 3)
            {
                itemText.innerHTML    = 'Winter Cherry';
                itemCaption.innerHTML = ''};

            if(imgID == 4)
            {
                itemText.innerHTML    = 'Autumn Leaves';
                itemCaption.innerHTML = ''};

            if(imgID == 5)
            {
                itemText.innerHTML    = 'Boardwalk';
                itemCaption.innerHTML = ''};

            if(imgID == 6)
            {
                itemText.innerHTML    = 'Driftwood';
                itemCaption.innerHTML = ''};

            if(imgID == 7)
            {
                itemText.innerHTML    = 'Canvas Linen';
                itemCaption.innerHTML = ''};

            if(imgID == 8)
            {
                itemText.innerHTML    = 'Linen Flaxseed';
                itemCaption.innerHTML = ''};

            if(imgID == 9)
            {
                itemText.innerHTML    = 'Silver Flannel';
                itemCaption.innerHTML = ''};

            if(imgID == 10)
            {
                itemText.innerHTML    = 'Onyx';
                itemCaption.innerHTML = ''};

                            if(imgID == 11)
            {
                itemText.innerHTML    = 'East Indian Laurel';
                itemCaption.innerHTML = ''};

                              if(imgID == 12)
            {
                itemText.innerHTML    = 'Sandalwood';
                itemCaption.innerHTML = ''};

                              if(imgID == 13)
            {
                itemText.innerHTML    = 'Nora Creek Oak';
                itemCaption.innerHTML = ''};

                                 if(imgID == 14)
            {
                itemText.innerHTML    = 'Midnight Espresso';
                itemCaption.innerHTML = ''};
                    }
    </script>
                            <h1 class="galleryTitle">Color &amp; Stain</h1>
                            <div class="subMenu">
                            <ul>
                                <li><a href="color_stain1.htm">solid color melamine</a> </li>
                                <li><a href="color_stain3.htm">wood tone melamine</a></li>
                                <li><a class="active" href="color_stain_textured_1.htm">textured melamine</a></li>
                                <li><a href="color_stain.htm">wood veneer</a></li>
                            </ul>
                            </div>
                            <div class="galleryContainer2">
                            <div class="galleryNavContainer2">
                            <div class="subtitle">
                            <p>Textured Color</p>
                            </div>
                            <div class="thumbs">
                            <div class="pageDetail1">
                            <p>page 1 of 3</p>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;1&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured1_th.jpg" alt="Latitude East" title="Latitude East" />
                            <span class="imgText">Latitude East</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;11&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured11_th.jpg" alt="Summer Breeze" title="East Indian Laurel" />
                            <span class="imgText">East Indian Laurel</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;12&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured12_th.jpg" alt="Sandalwood" title="Sandalwood" />
                            <span class="imgText">Sandalwood</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;13&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured13_th.jpg" alt="Nora Creek Oak" title="Nora Creek Oak" />
                            <span class="imgText">Nora Creek Oak</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;14&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured14_th.jpg" alt="Midnight Espresso" title="Midnight Espresso" />
                            <span class="imgText">Midnight Espresso</span>
                            </a>
                            </div>
                            </div>
                            <div class="page">
                            <ul style="margin: 0px auto; padding: 0px; text-align: center;">
                                <li class="previous"></li>
                                <li class="next"><a href="color_stain_textured.htm">page</a>
                                </li>
                            </ul>
                            </div>
                            </div>
                            <div class="imgContainer2">
                            <div class="img"><img alt="" id="itemImage" name="IMG1" /></div>
                            <div class="text" style="margin-top: 13px; padding: 2px 0px 0px;">
                            </div>
                            </div>
                            </div>
                            <script type="text/javascript">
<!--
    var imgID = "1";
    swapImage(imgID);
//-->
                            </script>
                            </div>
                            <p style="margin-right: 15px;">
                            <strong>PLEASE NOTE</strong>: Items in our gallery are selected to show the variety of
                            our products. If you don't see exactly what you have in mind, most likely we have it
                            or can order it for you.
                            </p>
                            <div style="float: right; text-align: right;">
                            <p>
                            <a href="index.htm">View our other galleries</a> &raquo;<br />
                            <a href="http://www.marketingresponse.com/closetos/contact.asp">Schedule a complimentary in-home design consultation</a> &raquo;<br />
                            <a href="../locations.htm">Visit our Chicago area showrooms</a> &raquo;
                            </p>
                            </div>
                            <script language="JavaScript"><!--
     ThisPage = Gallery;
     GroupChange("on",ThisPage);
    //-->
                            </script>

当像本页一样选择缩略图时,我需要在大图像下方显示文字:http://jsfiddle.net/qVGFV/

1 个答案:

答案 0 :(得分:0)

您缺少在html中显示文本的元素。因为它不存在尝试添加文本什么都不做。使用class =“imgContainer2”

将其添加到div中
<p id="itemText" style="padding-bottom: 0px;"></p>