javascript - 选择三个具有属性值的div

我试图根据属性值隐藏/显示三个div。

基本上，应该隐藏.foo1，.foo2和foo3，直到属性值是[ccaction=new]，并且当属性值被JS更改为[ccaction=edit]时，foo1，foo2和foo3应该可见。

我试图用不同的方式隐藏/显示它们

[ccaction=new] .foo1 .foo2 .foo3 {

display: none !important;
}

[ccaction=edit] .foo1 .foo2 .foo3 {

display: block !important;
}

但是我认为我在某个地方犯了错误。我不确定我在哪里犯错。

有人可以帮助您找到错误吗？

提前非常感谢您！

最佳答案

您可能打算这样做：

$('button').click(function(e) {
  e.preventDefault();
  var $div = $('#myDiv'),
    current = $div.attr('ccaction'),
    new_str = current == 'new' ? 'edit' : 'new';

  $div.attr('ccaction', new_str);
});

div[ccaction="new"] .foo1,
div[ccaction="new"] .foo2,
div[ccaction="new"] .foo3 {
  display: none !important;
}
div[ccaction="edit"] .foo1,
div[ccaction="edit"] .foo2,
div[ccaction="edit"] .foo3 {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>Click to toggle new/edit ccaction attr</button>
<div ccaction="new" id="myDiv">
  <div class="foo1">Foo1</div>
  <div class="foo2">Foo2</div>
  <div class="foo3">Foo3</div>
</div>