MiT_73
@MiT_73

Как разграничить работу JS?

Есть 3 JS файла, внутри они почти одинаковые, подключил это все к одному html файлу. В итоге в разных местах вызываются другие или все одновременно js файлы, что и приводит к багам...
Не знаю как сделать так, чтобы JS работал в определенной секции (в диапазоне section id="1, 2, 3...")
Подскажите в какое направление капать...
...
<body>
...
<section class="colored-section bg-inverse" id="np-movies">
            <div class="container">
                <div id="mnp-posters"></div>
                <div class="col-md-0 offset-md-5">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" id="mnp-first"><em class="fa fa-angle-double-left"></em></a></li>
                            <li class="page-item"><a class="page-link" id="mnp-prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                            <li class="page-item"><a class="page-link" id="mnp-pageCounter">1</a></li>
                            <li class="page-item"><a class="page-link" id="mnp-next" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                            <li class="page-item"><a class="page-link" id="mnp-last"><em class="fa fa-angle-double-right"></em></a></li>
                        </ul>
                    </nav>
                </div>
                <div class="modal fade" id="mnp-myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="container">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-ios-close-empty" aria-hidden="true"></span></button>
                                </div>
                                <div class="modal-body-mnp"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<section class="colored-section bg-inverse" id="top-movies">
            <div class="container">
                <div id="mtr-posters"></div>
                <div class="col-md-0 offset-md-5">
                    <nav>
                        <ul class="pagination">
                           ...
                        </ul>
                    </nav>
                </div>
                <div class="modal fade" id="mtr-myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="container">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-ios-close-empty" aria-hidden="true"></span></button>
                                </div>
                                <div class="modal-body-mtr"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
...
<script async src="js/1.js"></script>
<script async src="js/2.js"></script>
<script async src="js/3.js"></script>
</body>
</html>

UPD:
js/1.js
$(function(){
	
	var page_number = 1
	getRequest(page_number);

	$("#mnp-next").on("click", function () {
		page_number +=1
		getRequest(page_number);
		$("#mnp-pageCounter").text(page_number);
	});

	$("#mnp-prev").on("click", function () {
		if (page_number==1){
			return;
		}else {
			page_number -=1;
			getRequest(page_number);
			$("#mnp-pageCounter").text(page_number);
		}
	});

	$("#mnp-first").on("click", function () {
		page_number = 1
		getRequest(page_number);
		$("#mnp-pageCounter").text(page_number);
	});

	$("#mnp-last").on("click", function () {
		page_number = 48
		getRequest(page_number);
		$("#mnp-pageCounter").text(page_number);
	});

	function getRequest(page_number) {

		var params = {
			api_key: '123',
			page: page_number,
			language: "ru-RU"
		};
		var url = 'http://api.themoviedb.org/3/movie/now_playing';
		$.getJSON(url, params).done(function(data) {
			showResults(data.results);
		});
	}

	function showResults(results) {
		var html = '';
		$.each(results, function(index,value) {
			console.log(value.title);
			var poster_path = value.poster_path;
			var poster_title = value.title;
			var id = value.id;
			if (poster_path === null) {
				return;
			} else {
				html += '<div class="poster" data-id="' + id + '"><img class="img" src="http://image.tmdb.org/t/p/w200' + poster_path  + '"  title="' + poster_title + '"/></div>';
				$('#mnp-posters').html(html);
			}
		});
		$(".poster").on("click", function () {
			console.log($(this).data('id'));
			var movie_id = $(this).data('id')
			console.log(movie_id)
			movieDetails(movie_id);
		});
	}

	function movieDetails(id) {

		var params = {
			api_key: '123',
			external_source: "imdb_id",
			language: "ru-RU"
		};
		var url = 'http://api.themoviedb.org/3/movie/' + id;
		$.getJSON(url, params).done(function(data) {
			showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries);
		});
	}

	function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) {
		
		$('#mnp-myModal').modal('show'); 
		
		var genre = genres.map(function(item) { return " " + item['name']; });
        var production_countrie = production_countries.map(function(item) { return " " + item['name']; });
        
		var html = '<div><img src="http://image.tmdb.org/t/p/w300/' + poster_path + '" /></div><div class="Modal-text"><div class="top-line"><h1>' + title + " / " + original_title + '</h1><span> Страна: ' + production_countrie + '</span><br><span> Рейтинг: ' + vote_average + '</span><br><span> Дата релиза: ' + release_date + '</span><br><span> Жанры: ' + genre + '</span></div><br><p>' + overview + '</p></div>';
		$('.modal-body').html(html);
		
		var css  = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')';
		$('.modal-content').css('background-image',css);

	}
});

js/2.js
$(function(){
	
	var page_number = 1
	getRequest(page_number);

	$("#mtr-next").on("click", function () {
		page_number +=1
		getRequest(page_number);
		$("#mtr-pageCounter").text(page_number);
	});

	$("#mtr-prev").on("click", function () {
		if (page_number==1){
			return;
		}else {
			page_number -=1;
			getRequest(page_number);
			$("#mtr-pageCounter").text(page_number);
		}
	});

	$("#mtr-first").on("click", function () {
		page_number = 1
		getRequest(page_number);
		$("#mtr-pageCounter").text(page_number);
	});

	$("#mtr-last").on("click", function () {
		page_number = 100
		getRequest(page_number);
		$("#mtr-pageCounter").text(page_number);
	});

	function getRequest(page_number) {

		var params = {
			api_key: '123',
			page: page_number,
			language: "ru-RU"
		};
		var url = 'http://api.themoviedb.org/3/movie/top_rated';
		$.getJSON(url, params).done(function(data) {
			showResults(data.results);
		});
	}

	function showResults(results) {
		var html = '';
		$.each(results, function(index,value) {
			console.log(value.title);
			var poster_path = value.poster_path;
			var poster_title = value.title;
			var id = value.id;
			if (poster_path === null) {
				return;
			} else {
				html += '<div class="poster" data-id="' + id + '"><img class="img" src="http://image.tmdb.org/t/p/w200' + poster_path  + '"  title="' + poster_title + '"/></div>';
				$('#mtr-posters').html(html);

			}
		});
		$(".poster").on("click", function () {
			console.log($(this).data('id'));
			var movie_id = $(this).data('id')
			console.log(movie_id)
			movieDetails(movie_id);
		});
	}

	function movieDetails(id) {

		var params = {
			api_key: '123',
			external_source: "imdb_id",
			language: "ru-RU"
		};
		var url = 'http://api.themoviedb.org/3/movie/' + id;
		$.getJSON(url, params).done(function(data) {
			showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries);
		});
	}

	function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) {
		$('#mtr-myModal').modal('show'); 
		
		var genre = genres.map(function(item) { return " " + item['name']; });
        var production_countrie = production_countries.map(function(item) { return " " + item['name']; });

		var html = '<div><img src="http://image.tmdb.org/t/p/w300/' + poster_path + '" /></div><div class="Modal-text"><div class="top-line"><h1>' + title + " / " + original_title + '</h1><span> Страна: ' + production_countrie + '</span><br><span> Рейтинг: ' + vote_average + '</span><br><span> Дата релиза: ' + release_date + '</span><br><span> Жанры: ' + genre + '</span></div><br><p>' + overview + '</p></div>';
		$('.modal-body').html(html);

		var css  = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')';
		$('.modal-content').css('background-image',css);	
	}
});
  • Вопрос задан
  • 168 просмотров
Пригласить эксперта
Ответы на вопрос 2
Corsello
@Corsello
Может вам необходимо последовательно загружать JS файлы с помощью аттрибута defer?
<script src="example.js" defer></script>
Ответ написан
@sergealmazov
Попробуйте изучить Webpack, Babel, что такое модули в JS. Структурируете код.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы