时间戳

首页 > 解决方案 > URL 中的参数获取树中的第一个子节点，而不是选定的 Javascript

javascript - URL 中的参数获取树中的第一个子节点，而不是选定的 Javascript

问题描述

我有一个关于我的页面的特定问题，我将尝试解释发生了什么。

我在我的页面中生成一个包含部分的列表。像这样：

<ul class="menu__list--nested active">
   <li class="menu__item" data-value="QlRxM25vS,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="c1hjS2hIV,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="OVQrV05iZ,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="Z1BoQUc5,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="SmVQT,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="UUZZY2M,5"><span> test </span></li>
         <li class="menu__item" data-value="S0FSc,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="QkpEdG96,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="Yzh3Ui8y,5"><span> test </span>
            <ul class="menu__list--nested active">
               <li class="menu__item" data-value="dDdVUWJ,6"><span> test </span></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="menu__item" data-value="TkN6SHZuM1,4"><span> test </span></li>
</ul>

如您所见，它是一个列表中的列表，以使树按级别分隔，该列表的重要值是li的数据值

现在，我的 javascript 文件具有获取所选li值的方法

    $('.menu__item').click(function(){         
        var dataValue = $(this).data('value');
        var idSeccionConNivel = dataValue.split(",");
        var idSeccion = idSeccionConNivel[0];
        var busqueda = $('#name_input').val();
        debugger;
        if (idSeccionConNivel.length>1){
            var nivel = idSeccionConNivel[1];
            window.location.href = "listado-articulos.php?" + 'seccion=' + idSeccion + '&nivel=' + nivel + '&search_query='+busqueda;
        }else{
            window.location.href = "listado-articulos.php?" + 'seccion=' + idSeccion + '&search_query='+busqueda;
        }       
    });

如您所见，当您单击带有.menu__item类的li时会触发它，它会获取数据值并执行其他操作。此功能仅在我单击特定li并获取该标签的数据值时激活，我遇到的问题是，当我分配 window.location.href 我选择的值时，它只需要第一个 li 值。

例如，如果我点击<li class="menu__item" data-value="UUZZY2M,5"></li>函数将seccion分配给UUZZY2M ，将nivel分配给5，但是window.loaction.href将url参数更改为li父亲，在这种情况下：SmVQT和4

我调试该函数并且只输入一次，因为 window.location.href 加载页面（如果您需要知道但使用新参数，它会加载相同的页面）。我做错了什么？

标签： javascripthtmljquery

解决方案

我认为问题在于li元素的嵌套性质意味着事件冒泡正在发生。如果将事件e分配给函数调用，然后使用e.stopPropagation()，则可以单击深度嵌套，它将使用该值而不是顶级父级以及两者之间的所有值。li

$('.menu__item').click(function(e){ 
    e.stopPropagation();
    var dataValue = $(this).data('value');
    var idSeccionConNivel = dataValue.split(",");
    var idSeccion = idSeccionConNivel[0];
    var busqueda = $('#name_input').val();

    let url;
    
    
    if (idSeccionConNivel.length>1){
        var nivel = idSeccionConNivel[1];
        url = "listado-articulos.php?" + 'seccion=' + idSeccion + '&nivel=' + nivel + '&search_query='+busqueda;
    }else{
        url = "listado-articulos.php?" + 'seccion=' + idSeccion + '&search_query='+busqueda;
    }
    alert( url );
    location.href=url;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<ul class="menu__list--nested active">
   <li class="menu__item" data-value="QlRxM25vS,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="c1hjS2hIV,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="OVQrV05iZ,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="Z1BoQUc5,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="SmVQT,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="UUZZY2M,5"><span> test </span></li>
         <li class="menu__item" data-value="S0FSc,5"><span> test </span></li>
      </ul>
   </li>
   <li class="menu__item" data-value="QkpEdG96,4"><span> test </span>
      <ul class="menu__list--nested active">
         <li class="menu__item" data-value="Yzh3Ui8y,5"><span> test </span>
            <ul class="menu__list--nested active">
               <li class="menu__item" data-value="dDdVUWJ,6"><span> test </span></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="menu__item" data-value="TkN6SHZuM1,4"><span> test </span></li>
</ul>

推荐阅读