Question

我有以下开关结构：

switch (ratio) {
  case "16:9":
    imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">'       
    break       
  case "4:3":
    imgContainer.innerHTML = '<img src="images/schita-usi-2.jpg">'
    break
  default:
    imgContainer.innerHTML = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">'
    imgContainer.innerHTML += '<map name="schita-usi-1">'
    imgContainer.innerHTML += '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">'  
    imgContainer.innerHTML += '</map>'
    break    
}

我们需要关注的是default案例。

代码工作正常但<map>标记在包含<area>标记之前已关闭。

我做了一些研究，似乎它可能是由格式错误的HTML引起的。还尝试创建一个包含代码的变量，然后调用该变量：

var htmlcode = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">';
var htmlcode += '<map name="schita-usi-1">';
var htmlcode += '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">';
var htmlcode += '</map>';
imgContainer.innerHTML = htmlcode

此变体在控制台中生成错误：SyntaxError：missing;在此行之前的陈述：var htmlcode += '<map name="schita-usi-1">';。

对于JavaScript来说，我非常新手。我没有在代码中看到任何HTML错误，这里会出现什么问题？是什么原因导致<map>标记在这种情况下自动关闭？

如果需要提供更多详细信息，请与我们联系。

Answer 1

您需要在第一行之后删除后续private static string GetIpFromRequestHeaders(HttpRequestMessage request) { IEnumerable<string> values; if (request.Headers.TryGetValues("X-Forwarded-For", out values)) { return values.FirstOrDefault().Split(new char[] { ',' }).FirstOrDefault().Split(new char[] { ':' }).FirstOrDefault(); } return ""; }个关键字，使其成为：

var

使用var htmlcode = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">'; htmlcode += '<map name="schita-usi-1">'; htmlcode += '<area shape="rect" coords="191,108,577,973" href="test.html" alt="" title="">'; htmlcode += '</map>';声明变量后，请勿对同一变量再次使用var关键字。

Answer 2

你正走在正确的道路上。首先发生这种行为的原因是，一旦你在页面上设置了实时DOM元素的HTML，浏览器就会尝试＆＃34;更正＆＃34;任何破碎的HTML给你。这包括关闭标签。

如您所愿，解决方案是将所有字符串放在一起首先和然后将结果设置为元素的HTML。但是在你的尝试中，至少有一个问题是你试图一遍又一遍地重新声明同一个变量。

你真的不需要变量。您只需在一行代码上构建字符串并将其设置为HTML即可。像这样简单：

imgContainer.innerHTML = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">'
                       + '<map name="schita-usi-1">'
                       + '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">'  
                       + '</map>';

它为您提供了代码中所需的多行格式（我假设是为了提高可读性），但是将整个操作作为单个赋值执行。 =右侧的所有内容都将首先进行评估（所有＆＃34;行＆＃34;，即使直到分号，它都是＃34;代码行＆＃ 34;），然后将结果分配到=的左侧。

innerHTML关闭标签

2 个答案: