Javascript, проблема вызова функции, не работает ключевое событие - PullRequest
Новая
       2

Javascript, проблема вызова функции, не работает ключевое событие

0 голосов
/ 13 октября 2019

Я занимаюсь js и долгое время не могу решить проблему ниже.

У меня есть функция для изменения размытого фона "changeBg", но она не работает при вызове.

Кроме того, функция ключевого события не работает, не знаю почему.

Буду признателен за любые подсказки, где искать проблемы.

Я знаю, что код мокрый, но он далек от конечного "продукта". 

 //counting img tags
  var n = $("img").length;
  var m = n - 2;
  //alert("jest " + m + "tagow img");
  //adding onclick to source of file
  var source = $(".slider-inner > img").attr("src");
  $(".slider-inner > img").attr("onclick", "location.href=\'" + source + "\'");
  for (i = 1; i <= m; i++) {
    $(".dotcontainer").append($("<div class=\"dot\">x</div>"));
    $('.slider-inner img').attr('id', function (i) {
      return 'x' + (i + 1);
    });
    $('.dotcontainer div').attr('id', function (i) {
      return 'x' + (i + 1);
    });
    var url = $('.slider-inner img:nth-child(' + i + ')').attr("src");
     console.log(i);
  }
    ///temporary solution for initial background
      $(".bg").css('background', "url('"+ source +"')");
      $(".bg").css('background-repeat', "no-repeat");
      $(".bg").css('background-size', "cover");
      $(".bg").css('background-position', "center");
      //making first dot active
      $('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
      //function changing backgorund
      
function changeBg() {
$(".bg").css('background', "url('"+ source +"')");
$(".bg").css('background-repeat', "no-repeat");
$(".bg").css('background-size', "cover");
$(".bg").css('background-position', "center");
};

    // next buttton

  $('.next').on('click', function nextImage() {
    var currentImg = $('.active');
    var nextImg = currentImg.next();
    var currentdot = $('.activee');
    var nextdot = currentdot.next();
    if (nextImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      nextdot.addClass('activee');
      var source = nextImg.attr("src");
      nextImg.attr("onclick", "location.href=\'" + source + "\'");
      changeBg();
      } else {
      currentImg.removeClass('active').css('z-index', -10);
      $('#x1').addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      $('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
    }
  });



//prev button
  $('.prev').on('click', function prevImage() {
    var currentImg = $('.active');
    var prevImg = currentImg.prev();
    var currentdot = $('.activee');
    var prevdot = currentdot.prev();
    var n = $("img").length;
    var m = n - 2;
    if (prevImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      prevdot.addClass('activee');
      changeBg();
    } else {
      currentImg.removeClass('active').css('z-index', -10);
      $('.slider-inner img:nth-child(' + m + ')').addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      $('.dotcontainer div:nth-child(' + m + ')').addClass('activee');
    }
  });

//switch active dots
   $(".dot").click(function (event) {
    $('.activee').attr('class', 'dot');
    $(this).attr('class', 'dot activee'); 
    var aktkrop = $(".activee").attr("id");
    var fotoa = $('.slider-inner .active').attr("id");
    $(".active").removeClass("active");
    $("#" + aktkrop).attr("class", "active")
  });


//temp shadowbox temporary solution
    $('.btn').on('click', function () {
    $(".boxx").css("display", "block");
  });
  $('.close').on('click', function () {
    $(".boxx").css("display", "none");
  });



   document.addEventListener('keydown',function(e){
      if (e.keyCode === 37) {
      prevImage();
    } else if(e.keyCode === 39) {
      nextImage();
    }
  });
  
body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #fff;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0;
	padding: 0;

}
.bg{
	z-index: -2;
	position: absolute;
	width: 100%;
	height: 100%;
	filter: blur(30px);
	-webkit-filter: blur(30px);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0;
	padding: 0;
}
.blackshadow{
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.6;
}


a {
	color: #fff;
	text-decoration: none;
}

h1 {
	text-align: center;
}

.container {
	width: 540px;
	margin: 40px auto;
	overflow: auto;

}

.slider-inner {
	width: 500px;
	height: 300px;
	position: relative;
	overflow: hidden;
	float: left;
	padding: 3px;
	border: #666 solid 1px;
}

.slider-inner img {
	display: none;
	width: 500px;
	height: 300px;
}

.slider-inner img.active {
	display: inline-block;
}

.prev,
.next {
	float: left;
	margin-top: 130px;
	cursor: pointer;
}

.prev {
	position: relative;
	margin-right: -45px;
	z-index: 100;
}

.next {
	position: relative;
	margin-left: -45px;
	z-index: 100;
}

.buba {

	display: flex;
	align-items: center;
	justify-content: center;
}

.dotcontainer {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-items: center;
	justify-content: center;
}

.dot {
	cursor: pointer;
	margin: 5px;
	width: 20px;
	height: 20px;
	background-color: gray;
	border-radius: 50%;
	text-align: center;
	justify-content: center;
	color: black;
	font-weight: 800;
}

.activee {
	background-color: white;
}

.boxx {
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.6;
	position: fixed;
	z-index: 11;
	margin: 0;
	padding: 0;
	display: none;
}

.close {
	margin-left: 300px;
	margin-top: 300px;
	z-index: 11;
}
<html>

<head>
	<title>Page Title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
		crossorigin="anonymous"></script>
</head>

<body>
	<div class="bg"></div>
	<div class="blackshadow"></div>
	
		<div class="boxx">
			<div class="closee">
				<button class="close">Close</button>
			</div>
		</div>
		<button class="btn">Kliknij</button>
		<div class="container">
			<h1>JQSlider</h1>
			
			<div class="slider-outer">
				<img src="http://www.fotem.pl/data/7d87e07a3066629171add66003d.png" id="prev" class="prev" alt="Prev">
				<div class="slider-inner">



					<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg" class="active">
					<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2019/09/30/14/51/squirrel-4515962_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2016/07/22/16/29/fog-1535201_1280.jpg">
					<img src="https://cdn.pixabay.com/photo/2016/11/23/13/48/beach-1852945_1280.jpg">



				</div>


				<img src="http://www.fotem.pl/data/6f1498615d84ca14dbf0de784bd.png" id="next" class="next" alt="Next">
			</div>
		</div>



		<div class="dotcontainer">
		</div>
	
	</body>
	<script type="text/javascript" src="script.js">

	</script>

</html>

Заранее спасибо.

Код: https://codepen.io/odzeradodeveloperajava/pen/EMLbzz

Ответы [ 2 ]

0 голосов
/ 13 октября 2019

Фон не изменился, так как исходная переменная не была актуальна с изображением src. Вам нужно убедиться, что источник не только объявлен один раз, но и значение в нем всегда будет обновляться при каждом событии.

Обработчик события keyup генерирует исключения, так как он не может получить доступ к nextImage () иprevImage () методы. Вам нужно будет разделить методы и повторно использовать их при необходимости как callBackFunction или просто вызвать их напрямую: 

function prevImage() {
    // code inside
}

function nextImage() {
    // code inside
}

$('.next').on('click', nextImage);
$('.prev').on('click', prevImage);

document.addEventListener('keyup', function (e) {
    if (e.keyCode === 37) {
        prevImage();
    } else if (e.keyCode === 39) {
        nextImage();
    }
});

Я внес несколько изменений в пример, которым вы поделились. Вот рабочая ручка: https://codepen.io/attila-antal/pen/KKKVGEd

0 голосов
/ 13 октября 2019

Прежде всего вы должны объявить свою функцию nextImage и prevImage вне слушателя события. Например: 

function nextImage() {
// your code
}

$('.next').on('click', nextImage);

Фон не меняется, потому что вы должны передать новый источник для вашей функции. например: 

function changeBg(source) {
// your code
}

Когда вы хотите вызвать функцию changeBg, вы должны передать новый источник: например: changeBg(newImageUrl);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...