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

Question

Я использую PHP скрипт для извлечения значений из базы данных следующим образом,

<div class="col-md-4" > 
    <?php  
     $qry = "SELECT * FROM upperbit_categories";      
     $rslt = mysqli_query($dbc,$qry); 
     while ($output = mysqli_fetch_array($rslt)) { 
    ?> 
    <li class="nav" id="test" style= "text-decoration: none;"> 
     <a href="postad" > 
      <?php echo $output['Classify'].'<br/>'; } ?> 
     </a> 
    </li> 
</div> 

<div class="col-md-4" id="testing"> 
</div> 

этот код дает мне ниже результата:

Общее оборудование

Испытательное оборудование

Возобновляемые источники энергии

Инженерные Услуги

Торговые услуги

Ниже немного JQuery:

<script> 
    $(document).ready(function(){ 
     $("#test").click(function(){ 
      var classprod = $(this).text(); 
      $("#testing").text(classprod); 
      event.preventDefault(); 
     }) 
    }); 
</script> 

Однако это только линейные выходы 1, но ничего другого, т.е. Общее оборудование. Какие изменения я должен внести в свой код javascript, чтобы иметь возможность отображать любой элемент?

Answer 1

В целом идентификатор элементов HTML должен быть уникальным, эти требования могут быть реализованы при использовании jQuery или JavaScript. В вашем коде вы использовали id="test" для элемента li внутри цикла, а затем вы ссылались на них, используя $("#test"), тогда только первый li работает из-за уникальности идентификатора.

вы можете использовать класс вместо id.

Answer 2

Небольшие ошибки, но их легко решить. Ваш php-цикл оставляет много открываемых тегов, закрывает только один, тогда вы должны использовать класс вместо Id для нескольких элементов. Еще один совет: вы должны открыть и закрыть тег ul перед вашим списком.

HTML

<div class="col-md-4" > 
    <ul> 
     <?php   
     $qry = "SELECT * FROM upperbit_categories";      
     $rslt = mysqli_query($dbc,$qry); 
     while($output = mysqli_fetch_array($rslt)){?> 
      <li class="nav test" style= "text-decoration: none;"><a href="postad" ><?php echo $output['Classify'];?></a></li> 
     <?php };?> 
    </ul> 
</div> 
<div class="col-md-4" id="testing"></div> 

JS

<script> 
    $(document).ready(function(){ 
     $(".test").on('click',function(event){ 
      event.preventDefault(); 
      var classprod = $(this).text(); 
      $("#testing").text(classprod); 
     }) 
    }); 
</script> 

Кроме того, я не знаю, что вы делаете, но рассмотреть возможность использования $ ("испытание на") вместо $ (". Test")