li标签循环问题jquery php

Question

我正在尝试使用<li>和jquery获取php的文字，但我的jquery ajax来电正在检索并显示我的<li>使用onclick显示文本，它仅警告页面上显示的每个<li>的第一个值

    <?php
      foreach ($query->result() as $row){
               // produce li tag 
              echo '<li id="select_cat" onclick="select_category()">'.$row->category_name.'</li>';        

                }


     ?>

jquery的

       $(document).ready(function(){
               $.ajax({
                   type:"GET",
                   url: "<?=base_url()?>" + "categories/display_categories_for_modal", 
                   success: function(res){
                     $("#main_categories").html(res); 
                     }
                });
               });
   function select_category(){
           var category = $("select_cat").text();
             alert(category);
   // every <li> clicked on always alerts the text of the first <li> e.g electronics 

}

HTML

    <ul id="main_categories">



     </ul>

Answer 1

在你的foreach循环中，你需要通过 this 关键字传递li元素的id。

更改自：

echo '<li id="select_cat" onclick="select_category()">'.$row->category_name.'</li>';    

要

echo '<li id="select_cat" onclick="select_category(this)">'.$row->category_name.'</li>';  

在js脚本中，将li参数添加到select_category（）函数中。

更改自：

function select_category(){
           var category = $("select_cat").text();
             alert(category);
   // every <li> clicked on always alerts the text of the first <li> e.g electronics 
}

更改为：

select_category = function (li){
                var category = $(li).text();
                alert(category);
            }

^并将函数放在$(document).ready(function(){ ... });中以防止错误：Uncaught ReferenceError: $ is not defined - 如果在jquery或document尚未就绪时调用jquery函数，则会出现。

新的PHP代码：

   <?php
      foreach ($query->result() as $row){
               // produce li tag 
              echo '<li id="select_cat" onclick="select_category(this);">'.$row->category_name.'</li>';        

       }
     ?>

新JS代码：

 <script>
    $(document).ready(function(){
        $.ajax({
             type:"GET",
               url: "" + "categories/display_categories_for_modal", 
               success: function(res){
                 $("#main_categories").html(res); 
                 }
        });

        select_category = function (li){
            var category = $(li).text();
            alert(category);
        }
    });
</script>   

Answer 2

触发事件的元素绑定到函数this，因此您应该只需执行此操作即可获取该类别：

var category = $(this).text();