Javascript 使用右选择器以div为目标

我的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

？

您似乎试图使用

.closest（）

方法来查找同级

'.action'

元素，但这不是

.closest（）

所做的。如中所述，它查找匹配的祖先元素。因此，您可以获得单击的div所属的tr元素，如下所示：

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

然后，您可以使用-找到属于该tr的下拉菜单div，这与

.closest（）

相反，因为它查找后代：

tr.find(".dropdown-menu")

换言之，要查找相关的

。下拉菜单

，请使用

.closest（）

向上导航到tr，然后使用

.find（）

向下导航到相关的div

请注意，我只调用一次

$（this）

，将结果放入变量中。这样更有效

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

• 第一行应该是

  $（function（）{

  （括号不正确）
• 最后第三行逗号前缺少一个

  “

---

您似乎正在尝试使用

.nestest（）

方法来查找同级

'.action'

元素，但这不是

.nestest（）

所做的。如中所述，它会查找匹配的祖先元素。因此，您可以获得单击的div所属的tr元素，如下所示：

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

然后，您可以使用-找到属于该tr的下拉菜单div，这与

.closest（）

相反，因为它查找后代：

tr.find(".dropdown-menu")

换言之，要查找相关的

。下拉菜单

，请使用

.closest（）

向上导航到tr，然后使用

.find（）

向下导航到相关的div

请注意，我只调用一次

$（this）

，将结果放入一个变量中。这样效率更高

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

• 第一行应该是

  $（function（）{

  （括号不正确）
• 最后第三行逗号前缺少一个

  “

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

html

从…起
主题
收到
隔离

相关的is代码笔位于

JS中

css

html

从…起
主题
收到
隔离

---

相关的is代码笔位于

那里的语法错误是什么：

$（此）。数据（“单击，！单击）；

？那些

s需要某种文本内容，以便于屏幕阅读器访问。类似于

aria label=“切换菜单“”是解决问题的一种方法。JavaScript点击处理程序应该在<代码> <代码>上，而不是在<代码> <代码>（键盘可访问性）。还考虑用<代码> <代码> s替换<代码> <代码> s，并删除<代码> HRFF  ADTF（因为它们不是真正的链接）。@danielnixon aria lebelling到底是什么？我想我之所以选择div，是因为当我编写css并将类放在a链接上时，css属性不会起作用，但会考虑更改它，谢谢！语法错误是什么：
$（this）。数据（“点击，！点击”）
？那些
需要某种文本内容来实现屏幕阅读器的可访问性。类似于
aria label=“toggle menu”
的内容是解决此问题的一种方法。JavaScript单击处理程序应该位于
上，而不是位于
上（用于键盘可访问性）也可以考虑用<代码> <代码> s替换<代码> <代码> s，并删除<代码> HRFF  ADTF（因为它们不是真正的链接）。@danielnixon aria lebelling到底是什么？我想我之所以选择div，是因为当我编写css并将类放在a链接上时，css属性不会工作，但会考虑更改它，谢谢！第一行有一个错误。应该是
$（function（）{
），而不是
$（function）{
。以及
$this.data中的另一个错误（“单击，！单击）
，请注意，这一行在单击后没有双引号。这只是在我的部分@IagoMelanias上重新键入的错误。在我的真实代码中它是正确的。我只是在这里重新编写以简化它！好的，我只是引用了它，因为有人可以将此代码用于其他内容。第一行中有一个错误。应该是
$（function（）{
而不是
$（函数）{
。以及
$this.data中的另一个错误（“单击，！单击）
，请注意，这行在单击后没有双引号。这只是在我的部分@IagoMelanias上重新键入的错误。在我的真实代码中，这是正确的。我只是在这里重新编写以简化它！好的，我只是引用了，因为有人可以将此代码用于其他用途。
 .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;
  }

<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>