Есть 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">«</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">»</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);
}
});