Tema: problema con jsfiddle
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/12/2015, 06:21
andykofman
 
Fecha de Ingreso: marzo-2008
Mensajes: 43
Antigüedad: 17 años
Puntos: 0
problema con jsfiddle
buenas para hacer mi pregunta estoy subiendo lo que llevo en jsfiddle pero no me esta aplicando la funcionalidad, si veis la construccion, al pinchar sobre el primer enlace se tieen que poner gris y no pasa nada, no me esta cogiendo bien el js,
si lo podeis ver y decirme por que, a

aqui paso la url
Código HTML: 
Ver original
  1. <body>
  2.   <div class="container12" style="padding-top:30px;">
  3.     <div class="row knew">
  4.       <div class="col4 prefix1">
  5.       </div>
  6.     </div>
  7.     <div class="row knew norkn">
  8.       <div class="col4">
  9.         <div class="caja">
  10.  
  11.           <ul class="no-knew con" id="ul0">
  12.             <li class="primerli" id="idprimerli">
  13.               <h5 id="esh5">titulo bloque 1</h5>
  14.               <div>
  15.                 <a href="#" class="tray-row selecctes" id="a1" onclick="seleccionar()"> enlace de bloque 0</a>
  16.                 <a href="#" class="tray-row" id="a2" onclick="seleccionar()">enlace de bloque 1</a>
  17.                 <a href="#" class="tray-row" id="a3" onclick="seleccionar()">enlace de bloque 2 </a>
  18.               </div>
  19.             </li>
  20.  
  21.  
  22.             <li class="secondli" id="idprimerlis">
  23.               <h5 id="esh5">titulo bloque 2</h5>
  24.               <div>
  25.                 <a href="#" class="tray-row" id="a1" onclick="seleccionar()"> enlace de bloque 0</a>
  26.                 <a href="#" class="tray-row" id="a2" onclick="seleccionar()">enlace de bloque 1</a>
  27.                 <a href="#" class="tray-row" id="a3" onclick="seleccionar()">enlace de bloque 2 </a>
  28.               </div>
  29.             </li>
  30.  
  31.             <li class="cuarto" id="iccuarto">
  32.               <h5>titulo bloque 4</h5>
  33.               <div>
  34.                 <a href="#" class="tray-row" onclick="seleccionar()"> enlace de bloque 0</a>
  35.                 <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 1</a>
  36.                 <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 2 </a>
  37.               </div>
  38.             </li>
  39.           </ul>
  40.  
  41.  
  42.         </div>
  43.       </div>
  44.       <div class="col1">
  45.         <div class="flechas">
  46.           <div class="btn primario width1">
  47.             <input type="button" id="der" onclick="mostrarMensaje1()">
  48.           </div>
  49.           <div class="btn primario width1">
  50.             <input type="button" id="izq">
  51.           </div>
  52.         </div>
  53.         <div class="flechas rotate">
  54.           <div class="btn primario width1 ">
  55.             <input type="button" id="der">
  56.           </div>
  57.           <div class="btn primario width1">
  58.             <input type="button" id="izq">
  59.           </div>
  60.         </div>
  61.       </div>
  62.       <div class="col4" id="col4">
  63.         <div class="caja">
  64.           <ul class="no-knew" id="ul1">
  65.             <li class="primerli" id="idsegundolier">
  66.               <h5>titulo bloque 1</h5>
  67.               <div id="jass">
  68.  
  69.                 <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 1</a>
  70.                 <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 2 </a>
  71.               </div>
  72.             </li>
  73.  
  74.             <li class="secondli" id="idtercerliseg">
  75.               <h5>titulo bloque 2</h5>
  76.               <div>
  77.                 <a href="#" class="tray-row" onclick="seleccionar2()"> enlace de bloque 0</a>
  78.                 <a href="#" class="tray-row" onclick="seleccionar2()">enlace de bloque 1</a>
  79.                 <a href="#" class="tray-row" onclick="seleccionar2()">enlace de bloque 2 </a>
  80.               </div>
  81.             </li>
  82.  
  83.  
  84.           </ul>
  85.         </div>
  86.  
  87.       </div>
  88.     </div>
  89.   </div>
  90. </body>

Código Javascript: 
Ver original
  1. var todasul;
  2.    var ul0;
  3.    var ul0_li;
  4.    var ul0_a;
  5.    var ul1;
  6.    var ul1_li;
  7.    var ul1_a;
  8.    var selected;
  9.    var seleccion="tray-row selecctes selectodos";
  10.    var enlaceselect;
  11.  
  12.  
  13.  
  14.  
  15. function seleccionar(){
  16.  
  17.   /*recorremos los enlaces del primer ul buscando el seleccionado
  18.   y obtenemos la clase del padre li */
  19.  
  20.   todasul= document.getElementsByTagName('ul');
  21.   ul0 = todasul[0];
  22.   ul0_a=ul0.getElementsByTagName('a');
  23.  
  24.  
  25.    for(  var is=0;  is < ul0_a.length; is++) {
  26.  
  27.        if (ul0_a[is].className==="tray-row selecctes") {
  28.  
  29.  
  30.          selected=ul0_a[is].className=seleccion;
  31.            enlaceselect=ul0_a[is];
  32.  
  33.          // variable guardada del enlace seleccionado
  34.  
  35.            // padre li del enlace seleccionado
  36.          ul0_li = ul0_a[is].parentNode.parentNode.className;
  37.         
  38.      
  39.          }
  40.  
  41.  
  42.  
  43.        }
  44.  
  45.     }
  46.  
  47.  
  48.  
  49.  
  50. function mostrarMensaje1()
  51. {
  52. ul1 = todasul[1];
  53. ul1_a= ul1.getElementsByTagName("li");
  54.  
  55.  
  56.     for(var i = 0; 0 <ul1_a.length; i++) 
  57.        {
  58.         /*pregunta si ha algun li en el primer ul que coincidad con un
  59.         li del segundo ul*/
  60.              if (ul1_a[i].className === ul0_li )
  61.  
  62.             {  
  63.  
  64.  
  65.      
  66.          var guardoigual= ul1_a[i].firstChild.nextSibling.nextSibling.nextSibling.appendChild(enlaceselect);
  67.           enlaceselect.className="tray-row selecctes";
  68.  
  69.           }
  70.           else if(enlaceselect.parentNode.parentNode.className===ul1_a[i].className)
  71.  
  72.             {
  73.  
  74.            ul1_a[i].parentNode.parentNode.appendChild(enlaceselect);
  75.  
  76.           }
  77.         
  78.     }
  79.  
  80.  
  81. }
Última edición por andykofman; 28/12/2015 a las 10:05