嵌套字符串 - 3 层 - 带引号

Question

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

<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 周围的引号给我带来了严重的问题，因为整段代码已经包含在“”中。但是我到底该如何解决呢？有什么想法吗？

Answer 1

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

Answer 2

最简单的解决方案是将 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';
      }
    });
}

<select class="form-select" id="topicId" name="topicId" onchange="sendAjax()">

或者你可以在不使用 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';
      }
    });
});

<select class="form-select" id="topicId" name="topicId">

如果出于某些原因您必须将所有代码放在 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()。

嵌套字符串 - 3 层 - 带引号

Nested strings - 3 levels - with quotes

javascript

quotes