Question

我的困境是我有id声音剪辑，我希望用户点击，但更改.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>

Answer 1

$(this).parent().parent().siblings().eq(0).addClass('audioNavOn');

应该有效。它将类添加到比单击的图像元素高两级的元素，然后选择它的第一个兄弟，即你的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>

或者您可以将audioNavOff和audioContainers合并为一个div：

<div class="audioNavOff audioContainer1">

甚至使用ID（这是他们将被正确使用的地方）：

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

无论您选择哪种方式，它都会让您的生活更容易保持分组，代码将更容易维护，您的最终addClass调用应该是（如果我上面写的大嵌套示例）：

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

顺便说一下。您不应该在页面上有重复的ID，而是使用类。（见我的例子）

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

1 个答案: