javascript - 根据某些 DIV 内容更改 CSS

Question

希望有人可以通过一些 jquery 或 javascript 帮助我。我有一些 DIV，其中包含复选框的值为“1”或“0”，具体取决于我是否选中该框：

<div class="checkbox">1</div>   //This is when the checkbox is checked

<div class="checkbox">0</div>   //This is when the checkbox is NOT checked

无论是 0 还是 1，这个 DIV 的类都保持不变，所以我需要有一个条件语句来说明，

“如果 DIV 的内容为 1，则显示它”

和

“如果 DIV 的内容为 0，则隐藏它”

这会很简单吗？

Answer 1

对于这种情况，过滤器会派上用场。

$('.checkbox').filter(function () {
   return $(this).text() == 0;
}).hide();

Answer 2

我会做不同的事情。

$("input#checkbox").change(function(){
  $("div.checkbox").toggle(this.checked);
});

考虑到您的复选框是它正在改变<div>无论如何内容的复选框。

Answer 3

每当更改复选框时，请查看带有类的 div，checkbox如果它们有 1，则显示，否则隐藏。

$('input[type="checkbox"]').on('change', function() {
    $('.checkbox').each(function(){
        if($(this).text() === '1'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

Answer 4

如果我必须这样做，那么我很乐意这样做：http: //jsfiddle.net/P2WmG/

var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
   $('#checkbox').hide();
} else {
   $('#checkbox').show();
}

Answer 5

您可以使用:contains() 选择器根据内容选择 div。

$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();