Question

我有一些代码正在运行，但想要进行改编，但无法使其正常工作。我有以下内容：

<script type="text/javascript">
    // <![CDATA[
        var textBlocks = new Array('Apple', 'Banana', 'Orange');
        function changeText(elemid) {
            var ind = document.getElementById(elemid).selectedIndex; 
            document.getElementById("display").innerHTML=textBlocks[ind];
        }
    // ]]>
</script>

但只想改变'Apple'，'Banana'，'Orange'来加载来自具有DIV ID的特定DIV的内容：内容A，内容B和内容C.

谢谢，艾迪

Answer 1

我不完全确定你的意思

加载某些内容以加载来自具有DIV ID的特定DIV的内容：内容A，内容B和内容C

但如果你的意思是你有3个div：

<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>

然后你可以在其内容的javascript中创建一个数组：

var textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];

然而，这只有在按此顺序运行时才会起作用（即在运行此javascript以构建textBlocks之前必须将div插入到文档中。因此，您可能需要考虑使用jQuery来检测HTML何时元素准备就绪：

<script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script type="text/javascript">
    // <![CDATA[
        var textBlocks = [];
        function changeText(elemid) {
            var ind = document.getElementById(elemid).selectedIndex; 
            document.getElementById("display").innerHTML=textBlocks[ind];
        }
        $(document).ready(function() {
            textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];
            // ... do your other stuff here, like call changeText(..)
        });
    // ]]>
</script>
<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>

Answer 2

假设我明白你的需要试试这个：

var textDivsId = new Array('contentA', 'contentB', 'contentC');            
function changeText(elemid) {
    var ind = document.getElementById(elemid).value; 
    document.getElementById("display").innerHTML = document.getElementById(ind).innerHTML;
}

其中contentA，contentB和contentC是您要加载的DIV的ID。以下是JSFiddle的一些实例。这不是一个优雅的解决方案，您是否考虑过使用visibility=visible属性和CSS类动态交换？

使用Div Id从Div加载内容

2 个答案: