jQuery问题：点击li仅修改含active类图片的src（已有方案无效）

问题分析 #

1. jQuery引用顺序错误：你的自定义脚本写在了jQuery库引用之前，这会导致$未定义，整个脚本无法运行。
2. 选择器精准度不足：直接用全局选择器可能会误修改其他相同类名元素内的图片，应该限定在当前点击的
3. 范围内查找目标图片。

修正后的完整代码 #

<!-- 先引入jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    // 给目标li绑定点击事件
    $(".drop-down<?php echo $category['sort_order']; ?>").click(function() {
        var img_src = 'c.png';
        // 仅在当前点击的li内查找带active类的图片并修改src
        $(this).find(".active").attr('src', img_src);
    });
});
</script>

<ul>
    <!-- 示例li结构，确保active类在img上 -->
    <li class="drop-down<?php echo $category['sort_order']; ?>">
        <img src="a.png" class="active" alt="active image">
        <img src="b.png" alt="normal image">
    </li>
</ul>

关键修改说明 #

• 调整jQuery引用顺序：把jQuery库的<script>放在自定义脚本之前，确保$能被正常识别。
• 使用$(this).find()：$(this)指向当前被点击的
• 元素，再通过.find(".active")精准定位该li内部带active类的图片，避免影响页面上其他相同类名的元素。
• 确认DOM结构：要保证.active类直接加在<img>标签上，而不是其父元素，这样选择器才能正确匹配到图片元素。

如果还有问题，检查下$category['sort_order']输出的内容是否正确，确保

内容的提问来源于stack exchange，提问作者Madhumitha