jQuery没有更改页面上的下一个表单吗？_Jquery

jQuery没有更改页面上的下一个表单吗？

jquery

jQuery没有更改页面上的下一个表单吗？,jquery,Jquery,我有以下HTML代码： <ul id="contributorPhotos"> <li> <img src="viewIcon.png" class="View"> <img src="editIcon.png" class="Edit"> <img src="deleteIcon.png" class="Delete"> <form>

我有以下HTML代码：

<ul id="contributorPhotos">
    <li>
        <img src="viewIcon.png" class="View">
        <img src="editIcon.png" class="Edit">
        <img src="deleteIcon.png" class="Delete">
        <form>
            [Form fields to manage first image here]
        </form>
    </li>

    <li>
        <img src="viewIcon.png" class="View">
        <img src="editIcon.png" class="Edit">
        <img src="deleteIcon.png" class="Delete">
        <form>
            [Form fields to manage second image here]
        </form>
    </li>
</ul>



[此处用于管理第一个图像的表单字段]


[此处用于管理第二个图像的表单字段]

我的jQuery控制着这一点：

<script>
    $(".Edit").click(function() {
        $(this).find("form").css("background-color","#03C");
    });
</script>


$（“.Edit”）。单击（函数（）{
$（this.find（“form”）.css（“背景色”，“#03C”）；
});

正如你所看到的，我现在想做的就是改变当前编辑按钮下表单的背景色，但是我碰到了一堵墙

有人能解释一下为什么这不起作用吗？

你需要说$（this.parent（）.find（“form”）

嗯，我得说表单标签不允许出现在列表标签中

编辑：

David Byers，不是为了打扰你，但是你的html是错误的。。。列表标记中不允许使用图像标记。。表单标签也不是。。你应该添加一个背景图像到你的'按钮'与css。。。html将如下所示：

<div class="contributorPhotos">
        <!-- give background image and with to ur list tags -->
    <ul>
        <li class="View">View</li>
        <li class="Edit">Edit</li>
        <li class="Delete">Delete</li>
    </ul>

    <form>
        [Form fields to manage first image here]
    </form>
</div>



查看
编辑
删除

[此处用于管理第一个图像的表单字段]

嗯，我得说表单标记在列表标记中是不允许的

编辑：

<div class="contributorPhotos">
        <!-- give background image and with to ur list tags -->
    <ul>
        <li class="View">View</li>
        <li class="Edit">Edit</li>
        <li class="Delete">Delete</li>
    </ul>

    <form>
        [Form fields to manage first image here]
    </form>
</div>



查看
编辑
删除

[此处用于管理第一个图像的表单字段]


$.document.ready（函数（）{
$（“.Edit”）。单击（函数（）{
$（this.find（“form”）.css（“背景色”，“#03C”）；
});
}

您的单击功能可能从未绑定到单击事件。


$.document.ready（函数（）{
$（“.Edit”）。单击（函数（）{
$（this.find（“form”）.css（“背景色”，“#03C”）；
});
}

很可能您的单击函数从未绑定到单击事件。

仅适用于您选择的元素的后代，并且您正在寻找同级

使用以下命令：

$(".Edit").click(function() {
    $(this).siblings("form").css("background-color","#03C");
});

仅对所选元素的后代有效，并且您正在寻找兄弟

使用以下命令：

$(".Edit").click(function() {
    $(this).siblings("form").css("background-color","#03C");
});

改用：

$(".Edit").click(function() {
    $(this).closest('li').find("form").css("background-color","#03C");
});

您面临的问题是

find（）

的工作方式：它在当前元素中查找（在本例中是

$（'.Edit'）

元素，它是元素的图像）由

find

中的选择器定义。因为图像不能包含任何其他元素，所以这永远不会起作用。上面的替代方法是移动到父

li

元素，然后在该元素中搜索

表单

您也可以尝试使用：

$(".Edit").click(function() {
    $(this).siblings("form").css("background-color","#03C");
});

它将在

$（'.Edit'）

元素的同级元素之间进行搜索

参考资料：

改用：

$(".Edit").click(function() {
    $(this).closest('li').find("form").css("background-color","#03C");
});