2016-02-23 5 views
1

У меня динамически отображается содержимое в DIVS, и я хочу заблокировать появление некоторых DIVS. Код выглядит следующим образом:Как скрыть/показать DIV на основе содержимого идентификатора Div

<div class = "DivStyle" id="computer"> 
    <img src = "computer,jpg"> 
</div> 

<div class = "DivStyle" id="harddisk"> 
    <img src = "harddisk.jpg"> 
</div> 

<div class = "DivStyle" id="cable"> 
    <img src = "cable.jpg"> 
</div> 

т.д.

Как я могу блокировать ДИВ представлен «винчестер» выше появляться с использованием Javascript? По сути, я хочу сказать «If ID = harddisk then display = none».

Заранее благодарен!

+0

с помощью JQuery, просто: '$ ('IMG [SRC = "harddisk.jpg"]) родитель() скрыть();'... с голой js, не совсем простой, но такой же концепцией. получить все imgs, перебрать их, проверить атрибут src, а затем скрыть родительский узел. –

+1

@MarcB Я думаю, что мы пытаемся скрыть на основе идентификатора, а не источника изображения. –

+1

, тогда это еще проще, 'getElementById ('harddisk'). ParentNode.style.display = 'none'' –

ответ

5

Используя простой JavaScript, это будет скрыть DIV:

document.getElementById('harddisk').style.display = "none"; 

Полный пример, где найти JavaScript:

<html> 
<head></head> 
<body> 
    <div class = "DivStyle" id="computer"> 
     <img src = "computer,jpg"> 
    </div> 
    <div class = "DivStyle" id="harddisk"> 
     <img src = "harddisk.jpg"> 
    </div> 
    <div class = "DivStyle" id="cable"> 
     <img src = "cable.jpg"> 
    </div> 
<script> 
    document.getElementById('harddisk').style.display = "none"; 
</script> 
</body> 

+0

Спасибо! Я попробовал, но это не сработает. Я добавил код внутри тега скрипта в начало документа, но ничего не меняется. Веб-инспектор говорит: «Ошибка Null не является объектом», если это помогает. –

+0

Да, вам нужно будет запустить javascript после загрузки DOM. Он должен работать, если вы поместите его в конец страницы. –

0

Скрипт должен быть выполнен после DOM загружается, перемещает код внутри этого блока, например,

(function() { 
    document.getElementById('harddisk').style.display = "none"; 
})(); 

, если вы используете использовать updatepabel это одно:

var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance(); 

pageRequestManager.add_endRequest(function() { 
    document.getElementById('harddisk').style.display = "none"; 
}); 
Смежные вопросы