Jquery 我可以使用$（this）影响另一个选择器吗？

我的困境是我有一个id soundclip，我希望用户点击它，但在.container中更改div的类

$( ".container #soundclip" ).bind({
          click: function() {
          $('.container .audioNavOff').removeClass('audioNavOff');
          $('.container $(this) div').addClass('audioNavOn');
          },
      });
<div class="container">
      <div class="audioNavOff">HD AUDIO</div><div class="audioContainer1"><a href="#"><img id="soundclip" src="assets/img/hd-audio-off.jpg" alt="" class="center"/></a></div>
      <div class="audioNavOff">DIGITAL</div><div class="audioContainer2"><a href="#"><img id="soundclip" src="assets/img/digital-audio-off.jpg" alt="" class="center"/></a></div>
      <div class="audioNavOff">ANALOG</div><div class="audioContainer3"><a href="#"><img id="soundclip" src="assets/img/analog-audio-off.jpg" alt="" class="center"/></a></div>
</div>

$（“.container#soundclip”）.bind({
单击：函数（）{
$（'.container.audioNavOff'）.removeClass（'audioNavOff'）；
$（'.container$（this）div'）.addClass（'audioNavOn'）；
},
});
高清音频
数字的
模拟

应该有用。它将类添加到位于单击的image元素上方两个级别的元素中，然后选择它的第一个同级，即div

更新

我建议您稍微重组一下HTML：为三个选项中的每一个使用一个容器。你甚至可以在你的audioOff课堂上包装它们，如下所示：

<div class="container">
  <div class="audioNavOff">HD AUDIO
    <div class="audioContainer1">
      <a href="#">
        <img class="soundclip center" src="assets/img/hd-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
  <div class="audioNavOff">DIGITAL
    <div class="audioContainer2">
      <a href="#">
        <img class="soundclip center" src="assets/img/digital-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
  <div class="audioNavOff">ANALOG
    <div class="audioContainer3">
      <a href="#">
        <img class="soundclip center" src="assets/img/analog-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
</div>

---

顺便说一句，你的页面上不应该有重复的ID，而应该使用类。（参见我的示例）

.container$（this）div'）这无效您可以将选择器与其他元素$（'SELECTOR'，this）一起使用。但这很难，你必须更好地结构化你的HTML。

Id

必须是唯一的！！！使用

class

instead我尝试了您的解决方案，但它正在更改所有div class=“audioNavOff”而不是仅更改单击其子图像的解决方案。我加了一把小提琴，那是你的密码。：）我没碰过，这是你需要解决的问题之一。您只需要删除将获得on类的div上的off-class。。。因此，您可以将“.removeClass（'audioNavOff'）”添加到我给您的链中。顺便说一句，你的小提琴混合了我给你的两个想法，让我来修正一下。这就像我所期望的那样有效。但是，如果我想删除先前单击的.audioNavOn，并将其添加到当前单击的.audioNavOn中。因此，只有一个可以激活。toggleClass（）是一个选项，还是只执行off/ontoggleClass对应用程序来说是一个好主意，但它不会立即工作，因为它只是打开和关闭类。如果希望保持现在的状态，只需删除on类，如下所示：

$（'.audioNavOn'）.removeClass（'audioNavOn'）

但它不会删除该类，然后用$（this.parent（）.parent（）.prev（）.removeClass（'audioNavOff'）.addClass（'audioNavOn'）再次添加它吗；

<div class="container">
  <div class="audioNavOff">HD AUDIO
    <div class="audioContainer1">
      <a href="#">
        <img class="soundclip center" src="assets/img/hd-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
  <div class="audioNavOff">DIGITAL
    <div class="audioContainer2">
      <a href="#">
        <img class="soundclip center" src="assets/img/digital-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
  <div class="audioNavOff">ANALOG
    <div class="audioContainer3">
      <a href="#">
        <img class="soundclip center" src="assets/img/analog-audio-off.jpg" alt="" />
      </a>
    </div>
  </div>
</div>

<div class="audioNavOff audioContainer1">

<div class="audioNavOff" id="audioContainer1">    

$(this).parent().parent().parent().addClass('audioNavOn'); // $(this).parents().eq(2) is fine too