Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2016, 21:46
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Выборка и оптимизация кода
Добрый день, уважаемые, помогите разобраться с правильной постановкой выборки. Есть необходимость разобраться как правильно закодить отображение/срывание 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(); }
Не могу понять, помогите советом???
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2016, 21:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2016, 12:45
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Сообщение от laimas Посмотреть сообщение
$(function() {
$('#sidebarBox').on('click', 'li', function() {
$('#mainPicture').hide();
$('#contextBoxing > div').hide().eq($(this).index()).show();
})
});

</html>
Спасибо. Но это немного не то, что надо на выходе.
А как организовать проверку, что б при условии когда ни один из div contextBoxing не отображен, показывался #mainPicture (show). Типо переключалка
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2016, 13:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2016, 15:21
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Сообщение от laimas Посмотреть сообщение
$(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"))
})
});
Огромное спасибо, рони. Это то что мне было надо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация кода Nifler jQuery 6 30.09.2013 21:14
Оптимизация кода assd18 Общие вопросы Javascript 4 21.06.2013 15:26
Оптимизация кода Prizrak177 Общие вопросы Javascript 0 15.02.2011 16:36
Оптимизация кода. Правила хорошего тона при написании скриптов [ANTI]CheateR jQuery 1 18.09.2010 08:41
Оптимизация кода Tohin jQuery 7 11.07.2009 00:55