Question

我一直在看这个问题，我似乎找不到合适的解决方案。

以下是我的代码的一部分：

         <li style="float: right;">Themes
            <ul>
             <?php
                $db=mysql_connect('localhost','root','');
                if(!$db) {
                    die('Could not connect: '.mysql_error());
                }
                $connection_string=mysql_select_db('somedb',$db);
                $selectSQL='SELECT * FROM color_patterns';       
                $queryset=mysql_query($selectSQL);
                $num=mysql_num_rows($queryset);
                if(0==$num) {
                    echo "No record";
                    exit;
                } else {
                    while($row=mysql_fetch_assoc($queryset)) {?>
                    <li onclick="liPosition()">
                        <?php echo($row['name']);?></li><?php
                    }
                }
            ?>  

            </ul>
        </li>

这是一个包含下拉列表的列表项。为了填充下拉列表，我调用了我的数据库，对于表中的每一行，我在下拉列表中添加了一个li元素。我想根据用户点击的li从数据库中检索更多信息，所以我创建了一个JS函数，它应该让我得到点击的li的索引，（li索引对应于我要检索的另一个表的id）信息来自）：

      <script>

        function liPosition() {
          var index = $(this).parent().children().index(this);
          alert("You clicked item " + index);
        });

        </script>

当我点击我时，我收到一个错误：未捕获的ReferenceError：在一些研究之后没有定义liPosition我发现我不能在这里传递onclick监听器，但我不知道如何在while循环中找到li的索引。有没有办法在列表中找到使用while循环生成的li元素的索引？非常感谢任何帮助，谢谢。

Answer 1

为什么不删除内联JavaScript并使用完整的jQuery？

PHP - 使用类来标识所单击的项目;

while($row=mysql_fetch_assoc($queryset)) {?>
    <li class="list_item">
    <?php echo($row['name']);?></li><?php
}

jQuery - 选择器是列表项的类;

<script>

$(document).on('click', '.list_item', function() {
    var index = $(this).id;
    alert("You clicked item " + index);
});

</script>

另外：请stop using mysql_* functions。已在PHP 7中删除These extensions。了解prepared和PDO的MySQLi语句，并考虑使用PDO，it's really pretty easy。

Answer 2

您可以将this引用作为参数发送给函数。

<li onclick="liPosition(this)">

然后将参数添加到您的函数中。

<script>

    function liPosition(listitem) {
      var index = $(listitem).parent().children().index(listitem);
      alert("You clicked item " + index);
    };

</script>

仅供参考，您还会在功能定义)

的末尾添加一个额外});的小拼写错误

<script   src="http://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script> 

<li onclick="liPosition(this)">item 1</li>
<li onclick="liPosition(this)">item 2</li>

<script>

    function liPosition(listitem) {
      var index = $(listitem).parent().children().index(listitem);
      alert("You clicked item " + index);
    };

</script>

未捕获的参考错误和JS功能

2 个答案: