Выборка и оптимизация кода
Добрый день, уважаемые, помогите разобраться с правильной постановкой выборки. Есть необходимость разобраться как правильно закодить отображение/срывание DOM элементов на простом примере.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div id="main"> <div id="sidebarBox" > <ul> <li id="button1">Заголовок 1</li> <li id="button2">Заголовок 2</li> <li id="button3">Заголовок 3</li> <li id="button4">Заголовок 4</li> <li id="button5">Заголовок 5</li> </ul> </div> <div id="mainPicture"> Picture</div> <div id="contextBoxing"> <div id="button1_Context1">Context1</div> <div id="button2_Context2">Context2</div> <div id="button3_Context3">Context3</div> <div id="button4_Context4">Context4</div> <div id="button5_Context5">Context5</div> </div> </div> </body> <script type="text/javascript" src='script.js'></script> </html> CSS
#main {
position: relative;
width: 800px;
height: 500px;
background-color: gold;
}
#sidebarBox {
float: left;
margin: 1%;
font-size: 2em;
cursor: pointer;
}
#sidebarBox li {
background-color: red;
width: 100%;
list-style-type: none;
border: 1px solid black;
margin: 1%;
padding: 1%;
}
#mainPicture,
#button1_Context1,
#button2_Context2,
#button3_Context3,
#button4_Context4,
#button5_Context5 {
float: left;
margin: 10%;
width: 300px;
height: 300px;
background-color: pink;
font-size: 3em;
text-align: center;
border: 1px solid black;
}
#button1_Context1 {
background-color: orange;
display: none;
}
#button2_Context2 {
background-color: green;
display: none;
}
#button3_Context3 {
background-color: lightblue;
display: none;
}
#button4_Context4 {
background-color: blue;
display: none;
}
#button5_Context5 {
background-color: purple;
display: none;
}
#sidebarBox li:hover{
background-color: lightgreen;
}
JS
window.onload = function() {
var $button1 = $('#button1'),
$button2 = $('#button2'),
$button3 = $('#button3'),
$button4 = $('#button4'),
$button5 = $('#button5'),
$Context1 = $('#button1_Context1'),
$Context2 = $('#button2_Context2'),
$Context3 = $('#button3_Context3'),
$Context4 = $('#button4_Context4'),
$Context5 = $('#button5_Context5');
var fullContext = [$Context1, $Context2, $Context3, $Context4, $Context5]; // Можно ли так, через один элемент, вызвать каждый элемент из множества ?
function showChapter(button, chapter) {
button.on( "click", function() {
$('#mainPicture').hide();
chapter.toggle();
if (chapter.show()) {fullContext.hide()}
else {$('#mainPicture').show(); } // С этим у меня большие вопросы
});
}
showChapter($button1, $Context1);
showChapter($button2, $Context2);
showChapter($button3, $Context3);
showChapter($button4, $Context4);
showChapter($button5, $Context5);
}
https://jsfiddle.net/BlackStar1991/9vpeapta/ Вопрос в следующем - как сделать правильно выборку элементов что б при условии что хотя бы один $Context show(), все остальные скрыты, а если и он скрыт, то отображается #mainPicture. Я попробывал через if (chapter.show()) {fullContext (тут должно за исключениемchapter) .hide()} else {$('#mainPicture').show(); } Не могу понять, помогите советом??? |
<html>
<head>
<meta charset="UTF-8">
<style>
#contextBoxing > div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
$('#sidebarBox').on('click', 'li', function() {
$('#mainPicture').hide();
$('#contextBoxing > div').hide().eq($(this).index()).show();
})
});
</script>
</head>
<body>
<div id="main">
<div id="sidebarBox" >
<ul>
<li>Заголовок 1</li>
<li>Заголовок 2</li>
<li>Заголовок 3</li>
<li>Заголовок 4</li>
<li>Заголовок 5</li>
</ul>
</div>
<div id="mainPicture"> Picture</div>
<div id="contextBoxing">
<div>Context1</div>
<div>Context2</div>
<div>Context3</div>
<div>Context4</div>
<div>Context5</div>
</div>
</div>
</body>
</html>
|
Цитата:
А как организовать проверку, что б при условии когда ни один из div contextBoxing не отображен, показывался #mainPicture (show). Типо переключалка |
Black_Star,
<html>
<head>
<meta charset="UTF-8">
<style>
#contextBoxing > div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
var b = $("#contextBoxing > div");
$("#sidebarBox").on("click", "li", function() {
var a = $(this).index(),
a = b.eq(a).toggle();
b.not(a).hide();
$("#mainPicture").toggle(a.is(":hidden"))
})
});
</script>
</head>
<body>
<div id="main">
<div id="sidebarBox" >
<ul>
<li>Заголовок 1</li>
<li>Заголовок 2</li>
<li>Заголовок 3</li>
<li>Заголовок 4</li>
<li>Заголовок 5</li>
</ul>
</div>
<div id="mainPicture"> Picture</div>
<div id="contextBoxing">
<div>Context1</div>
<div>Context2</div>
<div>Context3</div>
<div>Context4</div>
<div>Context5</div>
</div>
</div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:42. |