簡單的javascript幫助

Question

您好，我是javascript新手，基本上是在嘗試解決。 當我單擊鏈接以在占位符中顯示圖像時。 如果占位符1被1.jpg，2.jpg或3.jpg使用，則將占位符1留給該圖像並使用占位符2。 希望有意義，謝謝您的幫助

<script type="text/javascript" language="javascript">
function showPic (whichpic) { 
    if (document.getElementById) { 
        document.getElementById('placeholder1').src = whichpic.href
        if (whichpic.title) { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
        } else { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
        } 
        return false; 
    } else { 
        return true; 
    } 
}
</script>

<div style="border: 1px solid #999; padding: 1em; margin: 0 0 15px 0;">
<ul>
<li><a onclick="return showPic(this)" href="/images/1.jpg" title="A bunch of bananas on a table">some bananas</a></li>
<li><a onclick="return showPic(this)" href="/images/2.jpg" title="Condiments in a Chinese restaurant">two bottles</a></li>
<li><a onclick="return showPic(this)" href="/images/3.jpg" title="Seashells on a table">some shells</a></li>
</ul>

<p id="desc">Choose an image to begin</p>
<img id="placeholder1" src="/images/blank.gif" alt="" />
<img id="placeholder2" src="/images/blank.gif" alt="" />
</div>

Answer 1

如果您詢問如何找出元素中屬性的值，則可以像這樣使用jQuery...。

var src = $('#placeholder1').attr('src');

然后，您可以使用of的索引或其他一些字符串函數來確定src屬性是否與您感興趣的文件名相反。

Answer 2

我不得不承認，我對“ getAttribute”方法的了解還不足以解決它與跨瀏覽器的兼容性...

function showPic (whichpic) { 
    if (document.getElementById) {
        if(document.getElementById('placeholder1').getAttribute("src") == "/images/blank.gif") {
           document.getElementById('placeholder1').src = whichpic.href;
        } else {
           document.getElementById('placeholder2').src = whichpic.href;
        }
        if (whichpic.title) { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
        } else { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
        } 
        return false; 
    } else { 
        return true; 
    } 
}

編輯：將'.src'切換為'getAttribute（“ src”）'

Answer 3

將對placeholder1的引用存儲在變量中。 檢查placeholder1的src以查看它是否是您提到的任何圖像（在我的示例中，我使用正則表達式來完成此操作）。 如果它是這些圖像之一，則將變量重新分配給對placeholder2的引用：

function showPic (whichpic) { 
    var ph = document.getElementById('placeholder1');
    if (/[1-3]\.jpg/.test(ph.src)) {
        ph = document.getElementById('placeholder2');
    }
    ph.src = whichpic.href;
    var descChild = document.getElementById('desc').childNodes[0];
    descChild.nodeValue = whichpic.title || whichpic.childNodes[0].nodeValue;
}

注意，您不需要測試document.getElementById的存在。 如果瀏覽器支持JavaScript，則支持document.getElementById 。