Question

在form.html.twig中，我有：

<script src="{{ asset('js/jquery-3.3.1.js') }}"></script>
<script>
....
{# my script that use jquery and works fine #}
....
var categorias = [{
  id: 1,
  subcategorias: ['Limpiar casa', 'Ordenar casa']
}, {
  id: 2,
  subcategorias: ['Recambios', 'ITV']
}, {
  id: 3,
  subcategorias: ['Administración', 'Bolsa-Horas Extras', 'Cursos de formación', 'Permisos', 'Ropa', 'Vacaciones']
}, {
  id: 4,
  subcategorias: ['Copias de Seguridad', 'MySql-Doctrine', 'Php', 'Symfony', 'Twig', 'Otras tareas']
}, {
  id: 5,
  subcategorias: ['Facturas', 'Hacienda', 'Instalaciones', 'Material de Oficina', 'Material Didáctico']
}, {
  id: 6,
  subcategorias: ['Mapas-GPS', 'Alojamiento', 'Vuelos', 'Otras actividades']
}, {
  id: 7,
  subcategorias: ['Luz-Agua-Gas', 'Movil', 'Otras facturas']
}, {
  id: 8,
  subcategorias: ['Planes', 'Música', 'Lectura']
}, {
  id: 9,
  subcategorias: ['Alimentación', 'Limpieza', 'LeroyMerlin-Bricodepo', 'Centro Eguzkilore', 'Libros-Cultura', 'Otras compras']
}, {
  id: 10,
  subcategorias: ['Compras', 'Transporte', 'Otros']
}, {
  id: 11,
  subcategorias: ['Casa', 'Eguzkilore', 'Coche', 'Viajes', 'Hegoalde', 'Otros gastos']
}];

function categoriaChanged(categoriaId) {

  // deselect subcategoria
  $('#sd7d3822876_subcategoria').val('');

  // hide all subcategorias
  $('#sd7d3822876_subcategoria option[value!=""]').hide();

  for (var i = 0; i < categorias.length; i++) {
    // if(categoriaId.indexOf(categorias[i].id) > -1){
    if (categorias[i].id == categoriaId) {
      showSubcategorias(categorias[i].subcategorias);
      return;
    }
  }
}

function showSubcategorias(subcategorias) {
  for (var i = 0; i < subcategorias.length; i++) {
    $('#sd7d3822876_subcategoria option[value="' + subcategorias[i] + '"]').show();
  }
}

$(document).ready(function () {
  $('#sd7d3822876_subcategoria option[value!=""]').hide();

  $('#sd7d3822876_categoria ').on('change', function (e) {
    categoriaChanged(e.target.value);
  });

});
</script>

form.html.twig使用datepicker日历，该日历通过其模板datepicker.html.twig加载，这些脚本具有以下结构：

jQuery(function ($) {
....
{# script that use jquery and doesn't work with the step one's script but works fine without it #}
....
$('#{{ datepicker_use_button ? 'dp_' : '' }}{{ id }}').datetimepicker({{ dp_options|json_encode|raw }});
});

那些使用jquery的脚本无法与步骤一的脚本一起使用，但是如果没有它就可以正常工作。

那么就有一个jquery冲突。我该怎么解决？

Answer 1

我认为您的问题出在$(document).ready()

<script>
  ....
  {# my script that use jquery and works fine #}
  ....

  var categorias = [{
    id: 1,
    subcategorias: ['Limpiar casa', 'Ordenar casa']
  }, {
    id: 2,
    subcategorias: ['Recambios', 'ITV']
  }, {
    id: 3,
    subcategorias: ['Administración', 'Bolsa-Horas Extras', 'Cursos de formación', 'Permisos', 'Ropa', 'Vacaciones']
  }, {
    id: 4,
    subcategorias: ['Copias de Seguridad', 'MySql-Doctrine', 'Php', 'Symfony', 'Twig', 'Otras tareas']
  }, {
    id: 5,
    subcategorias: ['Facturas', 'Hacienda', 'Instalaciones', 'Material de Oficina', 'Material Didáctico']
  }, {
    id: 6,
    subcategorias: ['Mapas-GPS', 'Alojamiento', 'Vuelos', 'Otras actividades']
  }, {
    id: 7,
    subcategorias: ['Luz-Agua-Gas', 'Movil', 'Otras facturas']
  }, {
    id: 8,
    subcategorias: ['Planes', 'Música', 'Lectura']
  }, {
    id: 9,
    subcategorias: ['Alimentación', 'Limpieza', 'LeroyMerlin-Bricodepo', 'Centro Eguzkilore', 'Libros-Cultura', 'Otras compras']
  }, {
    id: 10,
    subcategorias: ['Compras', 'Transporte', 'Otros']
  }, {
    id: 11,
    subcategorias: ['Casa', 'Eguzkilore', 'Coche', 'Viajes', 'Hegoalde', 'Otros gastos']
  }];

  $(document).ready(function() {
    function showSubcategorias(subcategorias) {
      for (var i = 0; i < subcategorias.length; i++) {
        $('#sd7d3822876_subcategoria option[value="' + subcategorias[i] + '"]').show();
      }
    }

    function categoriaChanged(categoriaId) {
      // deselect subcategoria
      $('#sd7d3822876_subcategoria').val('');

      // hide all subcategorias
      $('#sd7d3822876_subcategoria option[value!=""]').hide();

      for (var i = 0; i < categorias.length; i++) {
        // if(categoriaId.indexOf(categorias[i].id) > -1){
        if (categorias[i].id == categoriaId) {
          showSubcategorias(categorias[i].subcategorias);
          return;
        }
      }
    }

    $('#sd7d3822876_subcategoria option[value!=""]').hide();

    $('#sd7d3822876_categoria ').on('change', function (e) {
      categoriaChanged(e.target.value);
    });
  });
</script>

Symfony的Twig模板中的Jquery冲突

1 个答案: