список не прокручивается по щелчку

-1

У меня есть два одинаковых списка в моем HTML код, и я хочу, если выбрать элемент в одном списке, то другой список должен автоматически перейти к этому элементу в нем, за что я написал код ниже, но это не работает, значит, когда я нажимаю любой элемент в списке-1, ничего не произойдет в списке-2. Я использую браузер Chrome на окнах 8.1. пожалуйста, решить проблему.список не прокручивается по щелчку

это мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script> 
      $('#l1 li').click(function() { 
       var val = $(this).html(); 
       $('#l2 li').each(function() { 
        $(this).css('color','black'); 
        if($(this).html() == val) { 
         $(this).css('color','red'); 
         $('#l2').animate({ 
          scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() 
         }); 
        }  
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px"> 
      <li>red</li> 
      <li>green</li> 
      <li>blue</li> 
      <li>yellow</li> 
      <li>black</li> 
      <li>orange</li> 
      <li>purple</li> 
      <li>pink</li> 
      <li>grey</li> 
      <li>brown</li> 
     </ul> 
     <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px"> 
      <li>purple</li> 
      <li>pink</li> 
      <li>grey</li> 
      <li>brown</li> 
      <li>red</li> 
      <li>green</li> 
      <li>blue</li> 
      <li>yellow</li> 
      <li>black</li> 
      <li>orange</li> 
     </ul> 
    </body> 
</html>

источник

2015-12-18 Sajal Ali

Я только что создал jsfiddle и он работает найти «https://jsfiddle.net/n8403xft/» единственное в своем коде вы упускаете

$(function() 
{ 
    // Insert code here 
});

источник

2015-12-18 08:49:39 Canvas

У меня есть функция в моем коде –

Проблема заключается в вашей выполняют код перед созданием DOM.

Вы должны использовать $(document).ready(function(){}), это означает, что ваш код будет выполняться, когда DOM загружен.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
     <script> 
 
     $(document).ready(function() { 
 
      $('#l1 li').click(function() { 
 
       var val = $(this).html(); 
 
       $('#l2 li').each(function() { 
 
        $(this).css('color','black'); 
 
        if($(this).html() == val) { 
 
         $(this).css('color','red'); 
 
         $('#l2').animate({ 
 
          scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() 
 
         }); 
 
        }  
 
       }); 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px"> 
 
      <li>red</li> 
 
      <li>green</li> 
 
      <li>blue</li> 
 
      <li>yellow</li> 
 
      <li>black</li> 
 
      <li>orange</li> 
 
      <li>purple</li> 
 
      <li>pink</li> 
 
      <li>grey</li> 
 
      <li>brown</li> 
 
     </ul> 
 
     <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px"> 
 
      <li>purple</li> 
 
      <li>pink</li> 
 
      <li>grey</li> 
 
      <li>brown</li> 
 
      <li>red</li> 
 
      <li>green</li> 
 
      <li>blue</li> 
 
      <li>yellow</li> 
 
      <li>black</li> 
 
      <li>orange</li> 
 
     </ul> 
 
    </body> 
 
</html>

источник

2015-12-18 08:52:25 Serginho

все еще не работает –

Здесь вы https://jsfiddle.net/xu9an9q8/ – Serginho

Это не зависит в любой браузер или любой ОС, просто замените ваш код скрипта бирки с

<script> 
$(document).ready(function() { 
    $('#l1 li').click(function() { 
     var val = $(this).html(); 
     $('#l2 li').each(function() { 
      $(this).css('color', 'black'); 
      if ($(this).html() == val) { 
       $(this).css('color', 'red'); 
       $('#l2').animate({ 
        scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() 
       }); 
      } 
     }); 
    }); 
});

источник

2015-12-18 08:55:39

Вы связыванием события щелчка, прежде чем элементы загружаются. Поместите свой js в последний из body тег, как показано ниже. Надеюсь, что это поможет вам.

<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
 
    </head> 
 
    <body> 
 
     <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px"> 
 
      <li>red</li> 
 
      <li>green</li> 
 
      <li>blue</li> 
 
      <li>yellow</li> 
 
      <li>black</li> 
 
      <li>orange</li> 
 
      <li>purple</li> 
 
      <li>pink</li> 
 
      <li>grey</li> 
 
      <li>brown</li> 
 
     </ul> 
 
     <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px"> 
 
      <li>purple</li> 
 
      <li>pink</li> 
 
      <li>grey</li> 
 
      <li>brown</li> 
 
      <li>red</li> 
 
      <li>green</li> 
 
      <li>blue</li> 
 
      <li>yellow</li> 
 
      <li>black</li> 
 
      <li>orange</li> 
 
     </ul> 
 
     <script> 
 
      $('#l1 li').click(function() { 
 
       var val = $(this).html(); 
 
       $('#l2 li').each(function() { 
 
        $(this).css('color','black'); 
 
        if($(this).html() == val) { 
 
         $(this).css('color','red'); 
 
         $('#l2').animate({ 
 
          scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() 
 
         }); 
 
        }  
 
       }); 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

источник

2015-12-18 08:56:29 Azim

список не прокручивается по щелчку

ответ

Смежные вопросы