使用正确的选择器定位 div

Question

My 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()所做的。正如 doco 中所解释的，它寻找匹配的祖先元素。因此，您可以像这样获取单击的div所属的tr元素：

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

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

tr.find(".dropdown-menu")

换句话说，要查找相关的.dropdown-menu，请向上导航到带有.closest()的tr，然后返回带有.find()的相关div。

$(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() {（括号不正确）
• 倒数第三行在逗号前缺少一个"。

Answer 2

JS

 $(function () {
  $('.dropdown-image').click(function () {
    var $relatedDiv = $(this).parents('tr.main').find('.dropdown-menu');
    $relatedDiv.toggleClass('bg-image-new-arrow-blue');
    $relatedDiv.toggleClass('bg-image-new-arrow');
  });
});

.css

 .bg-image-new-arrow{
    color: red;
    font-size: 12px;
    background: url(images/new-arrow.png) no-repeat;
  }
  .bg-image-new-arrow-blue{
    color: blue;
    font-size: 23px;
    background: url(images/new-arrow-blue.png) no-repeat;
  }

.html

<table>
  <tr class="main">
    <td class="dropdown">
        <a href="#">
            <div class="dropdown-image">asasdasdd</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 bg-image-new-arrow-blue">DropDown menu</div>
        </a>
    </td>
</tr>
</table>

相关的是代码笔在此链接中