Question

嗨，我刚接触到javascript，基本上是想解决这个问题。当我点击链接以在占位符中显示图像时。如果placeholder1由1.jpg，2.jpg或3.jpg使用，则将placeholder1与该图像一起使用并使用占位符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');

然后你可以使用索引或其他一些字符串函数来确定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的引用存储在变量中。检查占位符1的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。

简单的JavaScript帮助

3 个答案: