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

2 个答案: