如何使用javascript创建可切换div'；什么是innerhtml函数？

我正在尝试从

XML

文件导入信息，并创建一个名称，当单击

时，该名称将显示更多信息。此信息将位于
div
中，在单击标题之前不会显示

这就是我的想法。不起作用

$(document).ready(function () {
    $.ajax({
        type: "Get",
        dataType: "xml",
        url: 'service.xml',
        success: function (xml) {
            $(xml).find('Service[Name="j1979"]').find("Define").each(function () {

                var PID = $(this).attr("PID");
                var name = $(this).find("Name").text();
                var source = $(this).find("source").text();
                var doffset = $(this).find("DOffset").text();
                var type = $(this).find("Type").text();
                var length = $(this).find("Lenght").text();
                var scale = $(this).find("Scale").text();
                var noffset = $(this).find("NOffset").text();
                var units = $(this).find("Units").text();

                var moreinfo = "<div id='moreinfo'>source += '\r\n' += doffset += '\r\n' += type += '\r\n' += length += '\r\n' += scale += '\r\n' += noffset += '\r\n' += units</div>";

                document.getElementById("j1979").innerHTML += PID += " ";
                document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";

                document.getElementById("j1979").innerHTML += moreinfo;
            });
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
数据类型：“xml”，
url:'service.xml'，
成功：函数（xml）{
$（xml）.find（'Service[Name=“j1979”]”）。find（“Define”）。每个（函数（）{
var PID=$（this.attr（“PID”）；
var name=$（this.find（“name”）.text（）；
var source=$（this.find（“source”）.text（）；
var doffset=$（this.find（“doffset”）.text（）；
var type=$（this.find（“type”）.text（）；
var length=$（this.find（“Lenght”）.text（）；
var scale=$（this.find（“scale”）.text（）；
var noffset=$（this.find（“noffset”）.text（）；
var units=$（this.find（“units”）.text（）；
var moreinfo=“source++='\r\n'+=doffset++='\r\n'+=type++='\r\n'+=length++='\r\n'+=scale++='\r\n'+=noffset++='\r\n'+=units”；
document.getElementById（“j1979”）.innerHTML+=PID+=“”；
document.getElementById（“j1979”）.innerHTML++=
+=“\r\n”；
document.getElementById（“j1979”）.innerHTML+=moreinfo；
});
}
});
});

对于任何明显的错误和/或丑陋的代码，我深表歉意。
我编写了一个程序，需要在其中使用javascript切换div。我用这个代码找到了一个解决方案

function toggle( selector ) {
  var nodes = document.querySelectorAll( selector ),
      node,
      styleProperty = function(a, b) {
        return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
      };

  [].forEach.call(nodes, function( a, b ) {
    node = a;

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
  });

然后，您可以使用以下命令调用该函数：

toggle('.idOrClass');

确保在类或id名称周围使用单引号

希望这有帮助！：）
 根据现有代码，可以使用“+”运算符连接字符串

当需要在使用单引号定义的字符串中使用单引号时，可以在其前面使用反斜杠（\）作为转义字符

另外，最初需要使用类“moreinfo”隐藏div

至于新行，如果您想要moreinfo类中新行中的每个属性，可以使用HTML“pre”标记或“br”标记或其他方式来实现

所以代码应该是：

var moreinfo = "<pre id='moreinfo' style='display:none'> source = " + source + "\r\n doffset = " + doffset + "\r\n type = " + type + "\r\n length = " + length + "\r\n scale = " + scale + "\r\n noffset = " + noffset + "\r\n units = " + units +"</pre>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

var moreinfo=“source=“+source+”\r\n doffset=“+doffset+”\r\n type=“+type+”\r\n length=“+length+”\r\n scale=“+scale+”\r\n noffset=“+noffset+”\r\n units=“+units+”；
document.getElementById（“j1979”）.innerHTML+='
\r\n'+PID+“
”；
document.getElementById（“j1979”）.innerHTML+=moreinfo；

或

var moreinfo=“source=“+source+”
doffset=“+doffset+”
type=“+type+”
length=“+length+”
scale=“+scale+”
noffset=“+noffset+”
units=“+units+”；
document.getElementById（“j1979”）.innerHTML+='
\r\n'+PID+“
”；
document.getElementById（“j1979”）.innerHTML+=moreinfo；

如果要在单击时切换显示，可以使用三元运算符在onclick函数中给出条件：

var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display == \'inline-block\' ? document.getElementById(\'moreinfo\').style.display = \'none\' : document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

var moreinfo=“source=“+source+”
doffset=“+doffset+”
type=“+type+”
length=“+length+”
scale=“+scale+”
noffset=“+noffset+”
units=“+units+”；
document.getElementById（“j1979”）.innerHTML+='
；
document.getElementById（“j1979”）.innerHTML+=moreinfo；
我假设这就是您想要实现的目标：

假设演示中的脚本位于
success
函数中

首先，这里有一些错误

document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";

注意开始和结束处的
引号
，以及
结束标记

第二，在
p
元素中没有任何单词或任何东西表明可以单击它来显示更多信息，因此将
PID
像这样放在
p
中

document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\" ></p>";

document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";

#更多信息{
显示：无；
}
#j1979{
颜色：蓝色；
}

正在导入xml并将其存储到变量中。究竟什么不起作用？是不是
p
元素没有显示或创建？或者单击
onclick
不更改id
moreinfo
的
显示
？还是其他原因？有没有办法在再次单击时将其隐藏？最后一个问题。有没有办法通过简单的代码使多个div具有多个激活器？
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";