Question

我正在尝试从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 += '\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;
            });
        }
    });
});

对于任何明显的错误和/或丑陋的代码感到抱歉。

Answer 1

我认为这是你想要实现的目标：DEMO

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

中

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

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

这不会将p元素添加到标识为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之前将其隐藏

＆＃13;

$(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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我写了一个程序，我需要用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名称

周围使用单引号

希望这有帮助！：）

Answer 3

从你的代码中，你可以使用'+'运算符来连接字符串。

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

此外，您最初需要使用“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 = "<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\'">\r\n' + 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\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;

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

3 个答案: