如何使用javascript的innerhtml函数创建可切换的div？

我正在尝试从XML文件中导入信息，并创建一个名称，当clicked时，将显示更多信息。此信息将位于一个没有显示的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 += 'rn' += doffset += 'rn' += type += 'rn' += length += 'rn' += scale += 'rn' += noffset += 'rn' += units</div>";
                document.getElementById("j1979").innerHTML += PID += " ";
                document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "rn";
                document.getElementById("j1979").innerHTML += moreinfo;
            });
        }
    });
});

对于任何明显的错误和/或丑陋的代码，我们深表歉意。

我假设这就是你想要实现的：演示

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

首先，你在这里有一些错误

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

这不会将 p 元素添加到 ID j1979 的元素中，因为您是这样写的，你应该这样写

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

请注意开头和结尾的quotes，以及closing tag

其次，p元素中没有任何单词或任何内容表明您可以单击它以显示更多信息，因此请将PID放在p中，如下所示

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

这是具有一些CSS样式的完整代码，可在用户单击PID之前将其隐藏

$(document).ready(function () {
    var PID = "testPID";
    var name = "Random Name";
    var source = "Google";
    var doffset = "1000";
    var type = "A-9001";
    var length = "50CM";
    var scale = "100";
    var noffset = "0";
    var units = "Some Units";
    var moreinfo = "<div id='moreinfo'>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';">" + PID + "</p>";
    document.getElementById("j1979").innerHTML += moreinfo;
});

#moreinfo {
    display: none;
}
#j1979 {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="j1979"></div>

从您拥有的代码中，您可以使用"+"运算符来连接字符串。

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

此外，您最初需要使用类"更多信息"隐藏div。

至于换行符，如果您希望每个属性都在更多信息类的新行中，则可以通过使用HTML"pre"标签或"br"标签或其他方式来实现。

所以代码将是：

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

或

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'">rn' + PID + "</p>";
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'">rn' + PID + "</p>";
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 名称两边使用单引号

希望这有帮助！ :)

相关内容

最新更新

热门标签：