javascript - 使用 jQuery 在父级 <div> 中选择 <divs>

Question

我有一个 parent <div> , #amwcontentwrapper , 其中有一系列 divs在其中有自己的类和ID。

我想使用 jQuery 来选择这些 child divs , 如果他们有类 .amwhidden , 什么都不做，但如果没有，删除 .amwshown类并添加 .amwhidden类。

这是我目前所拥有的，但它不起作用。我觉得可能是我选的 child divs在 parent 内。

有人能看出任何明显的问题吗？感谢您的帮助。

  if ($('#amwcontentwrapper > div').hasClass('amwhidden')){

    } else {
    $('#amwcontentwrapper > div').fadeIn(600, function(){
    $('#amwcontentwrapper > div').removeClass('amwshown');
    $('#amwcontentwrapper > div').addClass('amwhidden');  
    });
    }

这是我正在使用的基本 html:

<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the 
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>

更新: 在下面的评论中使用 War10ck 的解决方案(即 $('#amwcontentwrapper > div.amwshown') )，我已经设法按照我的意愿更改类。然而，那些删除了 .amwshown 类并添加了 .amwhidden 类的页面仍然显示在页面上，尽管 CSS 看起来像这样:

.amwhidden {
display:none;
}

.amwshown {
display:block;
}

查看开发工具，似乎在运行 jQuery 时(在单击事件上)类正在更改，但是任何具有 .amwshown 的类添加的类(因此在页面上显示它们)也有一个 <style>添加到它们的标签使它们成为display:block;

当我按下另一个按钮时，它应该隐藏上述 <div>为了给另一个让路，类(class)正在改为 .amwhidden ，但是<style>标签没有被删除，所以即使它有 .amwhidden类，它仍然在页面上。

我在这里创建了一个 JSFiddle，如果有人还想帮忙的话!

`

$(document).ready(function() {

  $('#buybutton').click(function() {

    $('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
      $(this).removeClass('amwshown').addClass('amwhidden');
    });

    if ($('#amwbuy').hasClass('amwshown')) {} else {
      $('#amwbuy').fadeIn(600, function() {
        $('#amwbuy').removeClass('amwhidden');
        $('#amwbuy').addClass('amwshown');
      });
    }
  });






  $('#phdbutton').click(function() {

    $('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
      $(this).removeClass('amwshown').addClass('amwhidden');
    });

    if ($('#amwphd').hasClass('amwshown')) {} else {
      $('#amwphd').fadeIn(600, function() {
        $('#amwphd').removeClass('amwhidden');
        $('#amwphd').addClass('amwshown');
      });
    }
  });



});

#sidebar {
  position: absolute;
  left: 1%;
  top: 1%;
  font-size: 5em;
  color: #000000;
  width: 10%;
  display: block;
  background-color: red;
}
#amwcontentwrapper {
  position: absolute;
  left: 20%;
  top: 5%;
}
.amwshown {
  display: block;
}
.amwhidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="amwsidebar">
  <span class="sidebarbutton" id="phdbutton">PhD Button</span>
  <br />
  <br />
  <span class="sidebarbutton" id="buybutton">Buy Button</span> 
</div>



<div id="amwcontentwrapper">

  <div class="amwshown" id="amwintro">
    <p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
    <br />
    <br />
  </div>

  <div class="amwhidden" id="amwbuy">
    Buy Section
  </div>

  <div class="amwhidden" id="amwphd">
    PhD Section
  </div>

</div>

`

Answer 1

你可以使用not来移除你不想要的元素，像这样:

$('#amwcontentwrapper > div').not('.amwhidden')
    .removeClass('amwshown')
    .addClass('amwhidden');

并与之合作。