Выберите три divs со значением атрибута

Question

Я пытаюсь скрыть/показать три 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; 
} 

Но я думаю, что я делаю ошибку где-то. Я не уверен, где я делаю ошибки.

Может кто-нибудь помочь, чтобы найти ошибку?

Большое вам спасибо!

Answer 1

Может быть, это поможет вам:

div[ccaction="new"] { 
display: none !important; 
} 

div[ccaction="edit"] { 
display: block !important; 
} 

Answer 2

вероятно Вы имели в виду, чтобы сделать это:

$('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>