我试图根据属性值隐藏/显示三个 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>
关于javascript - 选择三个具有属性值的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28268860/