li标签循环问题jquery php

时间:2018-03-30 22:55:36

标签: php jquery html codeigniter

我正在尝试使用<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>

2 个答案:

答案 0 :(得分:2)

在你的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>   

答案 1 :(得分:0)

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

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