簡單的JavaScript幫助

喜即時通訊新的JavaScript基本上設法解決。當我點擊鏈接在佔位符中顯示圖像。如果PLACEHOLDER1使用由任一1.JPG，2.JPG，或3.JPG然後離開PLACEHOLDER1與該圖像並使用PLACEHOLDER2。希望是有道理的感謝您的幫助簡單的JavaScript幫助

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

來源

2011-08-04 Lee

請澄清你的問題。 –

修訂我的問題 – Lee

如果你問如何找出一個屬性的元素中的值，你可以使用jQuery像這樣....

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

那麼你可以使用的指數，或其他一些字符串函數來確定src屬性contrains你感興趣的文件名。

來源

2011-08-04 21:33:44

啊....包括50KB庫只是爲了'$（ '＃PLACEHOLDER1'）。ATTR（ 'SRC'）'代替'的document.getElementById（ 'placeholde1'）。src' –

和所有的其他好處它提供，但是，嘿，你就有權您的意見/喜好:)也許李不知道jQuery的，所以我只是把他介紹給東西，這將使他的生活更輕鬆：d –

感謝安東尼我」讀過一些關於jQuery的只是從來沒有使用過它：/ IM試圖所有3個答案，會看到我拿到第一份工作:) – Lee

我不得不承認，我不知道了「的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」）'

來源

2011-08-04 21:35:49

謝謝，這看起來像我想要的但由於某種原因不會佔位符2當我點擊另一個圖像顯示。 – Lee

它看起來像我忽略了從.src屬性讀取將返回文件的完整路徑的事實。所以「http：//www.foo.com/path/to/image.jpg」而不是「/path/to/image.jpg」。爲了解決這個問題：.getAttribute（「src」）而不是.src。編輯上面包括這一點。 –

存儲參考在一個變量來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。

來源

2011-08-04 21:36:13 gilly3

簡單的JavaScript幫助

回答

相關問題