使用正确的选择器定位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()所做的。 如doco中所述 ，它会寻找匹配的祖先元素。 因此，您可以像这样获得被单击的div所属的tr元素：

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

然后，您可以使用.find()方法找到属于该tr的下拉菜单div，这与.closest()的相反之.closest()在于，它查找后代：

tr.find(".dropdown-menu")

换句话说，要找到相关的.dropdown-menu ，导航与到TR .closest()然后回落到相关的分度， .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() { （括号不正确）
• 最后三行在逗号前缺少" 。

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>

相关的代码笔在这个环节