javascript - 使用右侧选择器定位 div

Question

我的 HTML:

<tr class="main">
    <td class="dropdown">
        <a href="#">
            <div class="dropdown-image"></div>
        </a>
    </td>
    <td class="from">from</td>
    <td class="subject">subject</td>
    <td class="received">received</td>
    <td class="status">Quarantined</td>
    <td class="action">
        <a href="#">
            <div class="dropdown-menu"></div>
        </a>
    </td>
</tr>

我正在尝试定位 .dropdown-menu 以在单击 .dropdown-image 后更改其背景图像。

我的 JavaScript:

$(function) {
    $('.dropdown-image').click(function() {
        var clicks = $(this).data('clicks');
        var td = $(this).parent().parent();
        var tr = $(this).parent().parent().parent();

        if (clicks) {
            td.closest('.action').child().child().css("background-image", "url(images/new-arrow.png)");
        } else {
            td.closest('.action').child().child().css("background-image", "url(images/new-arrow-blue.png)");
        }
        $(this).data("clicks", !clicks);
    });
});

但是，这不起作用。如何正确定位 .dropdown-menu？

Answer 1

您似乎正在尝试使用 .closest()查找同级的方法'.action'元素，但这不是.closest()做。如 the doco 中所述，它寻找匹配的祖先元素。这样你就可以得到被点击的div所属的tr元素，如下所示:

var tr = $(this).closest("tr");

然后你可以使用 .find() method 找到属于该 tr 的下拉菜单 div - 这与 .closest() 相反因为它寻找后代:

tr.find(".dropdown-menu")

也就是说，要找到相关的.dropdown-menu ，使用 .closest() 向上导航至 tr然后返回到相关的 div .find() .

$(function() {
    $('.dropdown-image').click(function() {
        var $this = $(this),
            clicks = $this.data('clicks'),
            $relatedDiv = $this.closest("tr").find(".dropdown-menu");

        if (clicks) {
            $relatedDiv.css("background-image", "url(images/new-arrow.png)");
        } else {
            $relatedDiv.css("background-image", "url(images/new-arrow-blue.png)");
        }
        $this.data("clicks", !clicks);
    });
});

请注意，我只调用 $(this) 一次，将结果放入变量中。这样效率更高。

此外，正如评论中指出的那样，您有两个语法错误:

• 第一行应该是$(function() { (括号不正确)
• 倒数第三行缺少 "逗号之前。