javascript - сбросить стиль для всех элементов div по частичному идентификатору

Question

Я думаю, что я довольно близок к решению, но сталкиваюсь с некоторыми проблемами. Я создал навигационное меню, которое меняет стили элементов, используя JavaScript для onmouseover. Для onmousedown я хочу сбросить все стили для div, которые соответствуют частичному идентификатору (внутри и снаружи навигационного меню), за которым следует новый стиль для нажатого div "nav" и связанного с ним "content" вне меню nav.

Другими словами, у меня есть несколько элементов div (nav1, nav2, nav3 и т. Д. И content1, content2, content3 и т. Д.), На которые я хочу ориентироваться на основе общих строк ("nav" и "content").

Вот основная структура HTML:

<div id="midColumn">
<div id="nav1" 
onmouseover = "slideIn('slide1')" 
onmousedown = "display(this, 'content1')" 
onmouseout = "slideOut('slide1')"
>
INTERACTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
<div id="nav2" 
onmouseover = "slideIn('slide2')" 
onmousedown = "display(this, 'content2')"
onmouseout = "slideOut('slide2')"
>
CONSTRUCTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
<div id="nav3" 
onmouseover = "slideIn('slide3')" 
onmousedown = "display(this, 'content3')" 
onmouseout = "slideOut('slide3')"
>
DECONSTRUCTIONS<span id="hiddenText">&nbsp;are . . .</span>
</div>
</div>
<div id="rightColumn">
<div id="content1"><img src="Django.jpg" width="400px"></div>
<div id="content2"><img src="Django.jpg" width="500px"></div>
<div id="content3"><img src="Django.jpg" width="700px"></div>

Следующий javascript почти работает, но querySelector влияет только на первый nav и контентный div:

function display(div, contentId){
var divIDKeyword = document.querySelector('[id^="nav"]');
var contentIDKeyword = document.querySelector('[id^="content"]');
divIDKeyword.style.color = 'black';
divIDKeyword.style.backgroundColor = 'white';
contentIDKeyword.style.display= 'none';
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}

Затем я попробовал это, но, возможно, я ошибся, потому что в этом сценарии ничего не работает:

function display(div, contentId){
var navIdFind=”nav”
var navString = document.getElementsByTagName('input'), navPartialId;
for (var i = 0; i < navString.length; ++i) {
if (navString[i].name.indexOf(navIdFind)!=-1) {
navPartialId = navString[i].id;
document.getElementById(navPartialId).style.color = 'black';
document.getElementById(navPartialId).style.backgroundColor = 'white';
}
}
var contentIdFind=”content”
var contentString = document.getElementsByTagName('input'), contentPartialId;
for (var i = 0; i < contentString.length; ++i) {
contentPartialId = contentString[i].id;
document.getElementById(contentPartialId).style.display= 'none';
}
}
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}

Я надеюсь найти эффективное, элегантное решение, которое минимизирует и максимально упрощает JavaScript. Заранее спасибо.

Answer 1

Чтобы попытаться нацелить частичные идентификаторы, просто добавьте классы ко всем из них. Например, для

<div id="content1"></div>
<div id="content2"></div>
<div id="content1"></div>

... сделай это:

<div id="content1" class="content"></div>
<div id="content2" class="content"></div>
<div id="content1" class="content"></div>

и ссылаться на эту группу идентификаторов в CSS как:

.content {color:#999999;back.........etc.....}

это значительно упростит все, что у вас есть, как вы и хотели. Надеюсь это поможет