Question

我有一个父<div>，#amwcontentwrapper，其中有一系列divs，其中包含自己的类和ID。

我想使用jQuery选择这些子divs，如果他们有类.amwhidden，则不执行任何操作，但如果没有，请删除.amwshown类并添加{{ 1}} class。

这是我到目前为止所做的，但它不起作用。我想可能是我在父母中选择了孩子.amwhidden。

有人能看到任何明显的问题吗？谢谢你的帮助。

divs

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

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

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

更新：在下面的评论中使用War10ck的解决方案（即<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>）我已按照自己的意愿设法改变了课程。但是，那些已经删除了.amwshown类和添加.amwhidden类的那些仍然显示在页面上，尽管CSS看起来像这样：

$('#amwcontentwrapper > div.amwshown')

看看开发工具，看起来，当运行jQuery（在单击事件上）时，类正在改变，但是添加了.amwhidden { display:none; } .amwshown { display:block; }类的任何类（因此在页面上显示它们））还添加了.amwshown标记，使其成为<style>

当我按下另一个按钮时，该按钮会隐藏前面提到的display:block;以便为另一个按钮让路，该类正在更改为<div>，但.amwhidden标记不是删除，所以即使它有<style>类，它仍然在页面上。

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

`

＆＃13;

.amwhidden

＆＃13;

$(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');
      });
    }
  });



});

＆＃13;

#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;
}

＆＃13;

`

Answer 1

您可以使用not删除不需要的元素，例如：

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

并与之合作。

Answer 2

试试这个

＆＃13;

$(document).ready(function() {
  $("#amwcontentwrapper").children().each(function(elem, x) {
    if ($(x).attr("class") == "amwhidden") {
      alert($(x).attr("class"));
      $(x).removeClass("amwhidden").addClass("amwshow");
      alert($(x).attr("class"));

    }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="amwcontentwrapper">
  <div class="amwhidden"></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 3

您可以尝试以下各项，

   $("#amwcontentwrapper div").each(function(){
        if($(this).hasClass('amwhidden'))
            //DO something
        else
            //DO something 
    });

Answer 4

感谢您的帮助，它促使一些头脑风暴解决了这个问题。

我没有添加.amwhidden类并使用jQuery删除。amwhidden类，而是创建了一个.amwsection类，其中所有部分都属于具有初始{display的类。 1}} none的值。到现在为止还挺好;加载页面时，所有部分都不存在。

然后我使用.css jQuery函数在单击相应按钮时将display:none更改为display:block，并将所有其他.amwsections更改为display:none 。这很好用，但效果非常突然;如果你使用了.animate函数，就没有消失了。但是，.animate不适用于display值。

.fadeOut和.fadeIn来救援！通过将.css更改包装在这些中，我可以创建淡入/淡出效果，并且仍然可以使用display值。

以下是此代码的一个示例。

#buybutton是要按的按钮。
#amwintro只是在页面加载时出现的内容 - 现在将设置为display：none如果这是第一个按下的按钮。
.amwsection 所有隐藏的部分。这部分代码只是重置了所有代码。这个和#amwintro部分发生得很快（1/100秒），以保持良好的响应时间。
#amwbuy是我要透露的特定部分。正如您所看到的，这会在较长时间内消失。

目前只在Chrome中测试过，但我想我已经得到了它！

$(document).ready(function () {

$('#buybutton').click(function() {
    $('#amwintro').fadeOut(1, function() {  
   $(this).css({
    display:'none',
    });
    });
    $('.amwsection').fadeOut(1, function() {  
   $(this).css({
    display:'none',
    });
    });

 $('#amwbuy').fadeIn(600, function() {  
   $(this).css({
        display:'block',
    });
    });  

    });
});

使用jQuery在parent <div>中选择<divs>

4 个答案: