使用正确的选择器定位 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，然后使用 .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>

使用正确的选择器定位 div

Targeting a div with the right selector

html

javascript

jquery