problema con jsfiddle

andykofman · #1 (**permalink**) 28/12/2015, 06:21

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<body>
  <div class="container12" style="padding-top:30px;">
    <div class="row knew">
      <div class="col4 prefix1">
      </div>
    </div>
    <div class="row knew norkn">
      <div class="col4">
        <div class="caja">
 
          <ul class="no-knew con" id="ul0">
            <li class="primerli" id="idprimerli">
              <h5 id="esh5">titulo bloque 1</h5>
              <div>
                <a href="#" class="tray-row selecctes" id="a1" onclick="seleccionar()"> enlace de bloque 0</a>
                <a href="#" class="tray-row" id="a2" onclick="seleccionar()">enlace de bloque 1</a>
                <a href="#" class="tray-row" id="a3" onclick="seleccionar()">enlace de bloque 2 </a>
              </div>
            </li>
 
 
            <li class="secondli" id="idprimerlis">
              <h5 id="esh5">titulo bloque 2</h5>
              <div>
                <a href="#" class="tray-row" id="a1" onclick="seleccionar()"> enlace de bloque 0</a>
                <a href="#" class="tray-row" id="a2" onclick="seleccionar()">enlace de bloque 1</a>
                <a href="#" class="tray-row" id="a3" onclick="seleccionar()">enlace de bloque 2 </a>
              </div>
            </li>
 
            <li class="cuarto" id="iccuarto">
              <h5>titulo bloque 4</h5>
              <div>
                <a href="#" class="tray-row" onclick="seleccionar()"> enlace de bloque 0</a>
                <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 1</a>
                <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 2 </a>
              </div>
            </li>
          </ul>
 
 
        </div>
      </div>
      <div class="col1">
        <div class="flechas">
          <div class="btn primario width1">
            <input type="button" id="der" onclick="mostrarMensaje1()">
          </div>
          <div class="btn primario width1">
            <input type="button" id="izq">
          </div>
        </div>
        <div class="flechas rotate">
          <div class="btn primario width1 ">
            <input type="button" id="der">
          </div>
          <div class="btn primario width1">
            <input type="button" id="izq">
          </div>
        </div>
      </div>
      <div class="col4" id="col4">
        <div class="caja">
          <ul class="no-knew" id="ul1">
            <li class="primerli" id="idsegundolier">
              <h5>titulo bloque 1</h5>
              <div id="jass">
 
                <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 1</a>
                <a href="#" class="tray-row" onclick="seleccionar()">enlace de bloque 2 </a>
              </div>
            </li>
 
            <li class="secondli" id="idtercerliseg">
              <h5>titulo bloque 2</h5>
              <div>
                <a href="#" class="tray-row" onclick="seleccionar2()"> enlace de bloque 0</a>
                <a href="#" class="tray-row" onclick="seleccionar2()">enlace de bloque 1</a>
                <a href="#" class="tray-row" onclick="seleccionar2()">enlace de bloque 2 </a>
              </div>
            </li>
 
 
          </ul>
        </div>
 
      </div>
    </div>
  </div>
</body>

Código Javascript:

Ver originalvar todasul;
   var ul0;
   var ul0_li;
   var ul0_a;
   var ul1;
   var ul1_li;
   var ul1_a;
   var selected;
   var seleccion="tray-row selecctes selectodos";
   var enlaceselect;
 
 
 
 
function seleccionar(){
 
  /*recorremos los enlaces del primer ul buscando el seleccionado
  y obtenemos la clase del padre li */
 
  todasul= document.getElementsByTagName('ul');
  ul0 = todasul[0];
  ul0_a=ul0.getElementsByTagName('a');
 
 
   for(  var is=0;  is < ul0_a.length; is++) {
 
       if (ul0_a[is].className==="tray-row selecctes") {
 
 
         selected=ul0_a[is].className=seleccion;
           enlaceselect=ul0_a[is];
 
         // variable guardada del enlace seleccionado
 
           // padre li del enlace seleccionado
         ul0_li = ul0_a[is].parentNode.parentNode.className;
        
     
         }
 
 
 
       }
 
    }
 
 
 
 
function mostrarMensaje1()
{
ul1 = todasul[1];
ul1_a= ul1.getElementsByTagName("li");
 
 
    for(var i = 0; 0 <ul1_a.length; i++) 
       {
        /*pregunta si ha algun li en el primer ul que coincidad con un
        li del segundo ul*/
             if (ul1_a[i].className === ul0_li )
 
            {  
 
 
     
         var guardoigual= ul1_a[i].firstChild.nextSibling.nextSibling.nextSibling.appendChild(enlaceselect);
          enlaceselect.className="tray-row selecctes";
 
          }
          else if(enlaceselect.parentNode.parentNode.className===ul1_a[i].className)
 
            {
 
           ul1_a[i].parentNode.parentNode.appendChild(enlaceselect);
 
          }
        
    }
 
 
}