嵌套字符串 - 3 级 - 带引号答案

【问题标题】：Nested strings - 3 levels - with quotes嵌套字符串 - 3 级 - 带引号
【发布时间】：2021-01-22 20:53:12
【问题描述】：

我有这个（这是代码的一部分）：

<select class="form-select" id="topicId" name="topicId" onchange="javascript:
                var data = $(':input[name]', '#dynamic-form').serialize();
                $.ajax(
                  'ajax.php/form/help-topic/' + this.value,
                  {
                    data: data,
                    dataType: 'json',
                    success: function(json) {                            
                        var eng1 = document.querySelectorAll('input[type="text"]');
                        eng1[eng1.length-1].style.display = 'none';
                    }
                  });">

问题是input[type="text"] - text 类型周围的引号给我带来了严重的问题，因为整个代码部分已经包含在“”中。但是我到底该如何解决这个问题呢？有什么想法吗？

【问题讨论】：

你为什么要把整个 javascript sn-ps 放在onchange 中？
这就是为什么在属性中内联 JS 是个坏主意。调用一个函数就没有问题了。
顺便说一句，onXXX 属性中不需要javascript:。这仅在包含 URL 的属性中需要，例如 href。

标签： javascript quotes

【解决方案1】：

最简单的解决方案是将onchange属性中的代码提取到一个函数中，并从该属性中调用该函数。

function sendAjax() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
}

&lt;select class="form-select" id="topicId" name="topicId" onchange="sendAjax()"&gt;

或者你可以不使用onchange从JS绑定事件监听器。

$("#topicId").change(function() {
  var data = $(':input[name]', '#dynamic-form').serialize();
  $.ajax(
    'ajax.php/form/help-topic/' + this.value, {
      data: data,
      dataType: 'json',
      success: function(json) {
        var eng1 = document.querySelectorAll('input[type="text"]');
        eng1[eng1.length - 1].style.display = 'none';
      }
    });
});

&lt;select class="form-select" id="topicId" name="topicId"&gt;

如果出于某种原因必须将所有代码放在onchange 中，您可以在名称周围使用单引号而不是双引号。您需要对它们进行转义，因为在选择器周围使用了单引号。

<select class="form-select" id="topicId" name="topicId" onchange="javascript:
                var data = $(':input[name]', '#dynamic-form').serialize();
                $.ajax(
                  'ajax.php/form/help-topic/' + this.value,
                  {
                    data: data,
                    dataType: 'json',
                    success: function(json) {                            
                        var eng1 = document.querySelectorAll('input[type=\'text\']');
                        eng1[eng1.length-1].style.display = 'none';
                    }
                  });">

最后，您只需使用$('input:text:last').hide()。

【讨论】：

【解决方案2】：

我不明白为什么不把它全部写在<script>.. 里面？但无论如何，您可以将所有单标签 ( ' ) 更改为反标签，然后将全局双标签 ( onchange="..." ) 更改为单标签。

【讨论】：