0

我有以下 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>

如您所见，我现在要做的就是更改当前编辑按钮下方表单的背景颜色，但我碰壁了。

有人可以解释为什么这不起作用吗？

4

5 回答 5

3

.find()仅适用于您选择的元素的后代，并且您正在寻找兄弟姐妹。

用这个：

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

jsFiddle 示例。

于 2012-04-10T17:19:18.243 回答
1

你需要说 $(this).parent().find("form")

于 2012-04-10T17:16:40.557 回答
1 
<script>
    $.document.ready( function() {
        $(".Edit").click(function() {
            $(this).find("form").css("background-color","#03C");
        });
    }
</script>

您的点击功能可能永远不会绑定到点击事件。

于 2012-04-10T17:17:26.723 回答
0

嗯，我得说列表标签中不允许使用表单标签......

编辑：

大卫拜尔斯，不是为了惹恼你，但你的 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>
于 2012-04-10T17:16:56.833 回答
0

改用：

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

您面临的问题是find()工作方式：它在当前元素内查找（在这种情况下，$('.Edit')元素是图像，用于 . 中的选择器定义的元素find。因为图像不能包含任何其他元素这永远不会起作用。上面的替代方法是移动到父li元素，然后在该元素中搜索form.

您也可以尝试使用：

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

它将在元素的兄弟元素中搜索$('.Edit')。

参考：

于 2012-04-10T17:22:37.290 回答