2012-05-21 3 views
2

У меня есть следующий код:JQuery показать/скрыть один DIV, если другой имеет значение

<div class="field-name-new"> 
    <div class="field-label">New</div> 
    <div class="field-items"> 
    <div class="field-item">0</div> 
    </div> 
</div> 

Мне нужно, чтобы показать div.field-метку, только если div.field-элемент имеет значение 1, и скрыть его, если он имеет значение 0.

ответ

1

, предполагающей есть только один div.field-item внутри каждого div.field-items это должно работать:

$('.field-items').each(function(i,el) 
{ 
    var field_item = $(el); 
    if(field_item.text() == 1) 
     $(this).prev().show(); 
    else 
     $(this).prev().hide(); 
}); 

пример: http://jsfiddle.net/zsA7W/

+0

Люблю это, потому что он добавит к любым элементам, которые у меня есть с этими клавишами - и у меня их много;) –

3
var $item = $('.field-item'); 

if ($item.text() == 0)​​ { 
    $item.parent().siblings('.field-label').hide(); 
}​ 

http://jsfiddle.net/zerkms/FTbBT/

+2

Примечание: Это будет только скрыть элемент, он не будет отображаться элемент, если он уже скрыт. – Guffa

+0

@ Guffa: да, это не будет – zerkms

1
$(document).ready(function(){ 
$('.field-item').each(function(){ 
     if($(this).text() == 0){ 
      $(this).parent().prev().hide(); 
     }else{ 
      $(this).parent().prev().show(); 
    } 
    }); 
    }); 
2

Используйте toggle method, чтобы показать или скрыть элемент в зависимости от состояния:

$('.field-label').toggle($('.field-item').text() == '1'); 
1

Вы можете использовать toggle() с булевым флагом

$('.field-name-new').each(function() { 
    var $this = $(this); 
    $this.find('.field-label').toggle(!!$this.find('.field-item').text()) 
}); 

Я создал each в случае, если у вас есть более чем один блок .field-name-new

1

Он отлично работает!

$(document).ready(function() { 
    if($(".field-item").html() == '0'){  
    $("div.field-label").hide(); 
    } 
});​ 

Обновлено Jsfiddle:http://jsfiddle.net/ipsjolly/m4BTd/4/ тест, изменив значение в <div class="field-item">0</div> и нажмите Run

Смежные вопросы