0
Я уже давно общаюсь с загрузочной машиной, jquery, javascript и html, и мне все же довольно сложно понять, как работают страницы, навигация и т. Д. Одна вещь, в частности, что у меня были проблемы с поиском ответов, является лучший способ/практика создания страницы ..?Использование bootstrap, jquery и javascript для создания динамической домашней страницы
Я пробовал следующее для своей страницы, но всегда найду то, что не работает, как я ожидаю.
- Создание «пустой» (содержащий пустые дивы) индекс страницы и с помощью JavaScript для загрузки внешних страниц (Проблема: Я не могу использовать идентификаторы или классы элементов во внешней странице больше с этим подходом)
- Создание единственной страницы index.html, содержащей все мои div и скрывающие/показывающие все, что мне нужно (проблема: быстро становится очень трудно найти вокруг, в котором отображаются/скрываются и добавляются вещи, может стать довольно сложным
- Создание один html-файл для всех «страниц», которые мне нужны (проблема: я не могу перенести свои javascript-вары с одной страницы на другую. Варвары становятся пустыми при загрузке новой страницы с помощью href)
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Course Suggestion Tool</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom_style.css" rel="stylesheet">
</head>
<body class="ui-mobile-viewport ui-overlay-c">
<div class="container" id="first">
<div id="study_area">
<fieldset>
<legend>Study</legend>
<div class="dropdown" id="study_dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dme" data-value="action-1" id="dme">Digital Media Engineering</a>
</li>
</ul>
</div>
<div>
<h4 id="study_choice">Study choice</h4>
</div>
</fieldset>
</div>
<div id="focus_area">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown" id="focus_dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" id="smaa">Social media and apps</a></li>
<li><a href="#" id="uxue">UX User experience</a></li>
<li><a href="#" id="ds">Data science</a></li>
<li><a href="#" id="cga">Computer games</a></li>
<li><a href="#" id="cgr">Computer graphics</a></li>
</ul>
</div>
<h4 id="focus_choice">Focus Choice</h4>
</fieldset>
</div>
<button id="next_page" type="button" class="btn btn-primary">Something exciting</button>
</div>
<div class="container" id="second">
</div>
</body>
</html>
Н.Б.
Содержание состоит из двух выпадающих. На загрузке страницы я хочу показать только первый. Затем, как только пользователь выберет что-то из этого раскрывающегося списка, я хочу показать, что он выбрал в заголовке, и показать второе выпадающее меню. После того, как выбран второй, я хочу отобразить выделение в заголовке и показать кнопку, которая «переводит пользователя на новую страницу». Однако то, что на самом деле импорт является то, что я хочу, чтобы «спасти» от имени выпадающих выбранного пользователя для использования в качестве своего рода feedback.'
functions.js
var selection = {};
$(document).ready(function(){
$("#focus_area").addClass("collapse");
$("#study_choice").hide();
$("#focus_choice").hide();
$("#next_page").hide();
$(".dme").click(function() {
$("#study_dropdown").hide()
var choiceText = $("#dme").text()
selection.study = choiceText;
$("#study_choice").text(choiceText)
$("#study_choice").show()
$("#focus_area").slideDown();
});
$("#smaa").click(function() {
$("#focus_dropdown").hide();
var choiceText = $("#smaa").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#uxue").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#uxue").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#ds").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#ds").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#cga").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#cga").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#cgr").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#cgr").text();
selection.focus = choiceText;
console.log(selection);
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#next_page").click(function() {
$("#first").load();
$("#second").load("planner.html") //External html page (currently empty)
});
});
есть ли у вас javascript-код? –
Взгляните на http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements, который объяснит, как исправить проблему неспособности получить доступ к вещам при динамической загрузке. – DelightedD0D
Необходимо масштабировать это до более конкретных проблем и предоставлять код, который не работает для конкретной проблемы. – charlietfl