Форум

Black_Star · #1 (**permalink**) 27.01.2017, 14:03

Добрый день уважаемые, подскажите пожалуйста, как при нажатии на кнопку Отмена(модального окна) перемещать ползунок на значение 9?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.corners:active, .corners:hover, .corners:focus{
			outline: none !important;
			outline-offset: 0;
		}
	</style>
</head>
<body>
	<input class="corners" type="range" min="0" max="10" step="1" value="0">
	<span>0</span>
	<script type="text/javascript">
		window.onload=function(){
			var pointer = $(".corners"),
			blockText = $("span");

			pointer.on("input", function () {

				pointerValue = pointer.val();

				console.log("$this.pointer.val() = " + pointer.val());
				blockText.text(pointerValue);

				if(pointerValue==10){
					if (confirm("Are you crazy?")) {

						alert("you chose  number 10")
					}else{
						pointer.val() ==9;
					}
				}
			})
		}
	</script>
</body>
</html>

Как запретить, если нажал Отмена, перевод ползунка в значение 10 ?
И ещё вопрос, как сделать что б указатель мышки не фиксировался на ползунке после нажатия на confirm ?

рони · #2 (**permalink**) 27.01.2017, 14:13

Сообщение от Black_Star

pointer.val() ==9;

это что? документацию на val(), нет желания прочесть?

Dilettante_Pro · #3 (**permalink**) 27.01.2017, 15:50

Black_Star,
и поменяйте обработчик input на change

Black_Star · #4 (**permalink**) 27.01.2017, 16:15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
        .corners:active, .corners:hover, .corners:focus{
            outline: none !important;
            outline-offset: 0;
        }
    </style>
</head>
<body>
    <input class="corners" type="range" min="0" max="10" step="1" value="0">
    <span>0</span>
    <script type="text/javascript">
        window.onload=function(){
            var pointer = $(".corners"),
            blockText = $("span");
 
            pointer.on("input", function () {
 
                pointerValue = pointer.val();
 
                console.log("$this.pointer.val() = " + pointer.val());
                blockText.text(pointerValue);
 
                if(pointerValue==10){
                    if (confirm("Are you crazy?")) {
 
                        alert("you chose  number 10")
                    }else{
                        pointer.val(9);
                    }
                }
            })
        }
    </script>
</body>
</html>

.val(newVal) атрибуту value будет присвоено значение newVal, у всех выбранных элементов. Ок с этим вроде бы разобрался. Правда оно всё равно не работает. После вызова значение все равно становится равно 10

Сообщение от Dilettante_Pro

Black_Star,
и поменяйте обработчик input на change

Чем change лучше?
И ещё как быть что б не было "прилипания" курсора к ползунку?

Dilettante_Pro · #5 (**permalink**) 27.01.2017, 16:22

Black_Star,

Сообщение от Black_Star

Чем change лучше?

Почувствуйте разницу (запускайте по одному примеру с обновлением страницы, чтобы не было паразитного влияния. От режима с input трудно избавиться)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.corners:active, .corners:hover, .corners:focus{
			outline: none !important;
			outline-offset: 0;
		}
	</style>
</head>
<body>
	<input class="corners" type="range" min="0" max="10" step="1" value="0">
	<span>0</span>
	<script type="text/javascript">
		window.onload=function(){
			var pointer = $(".corners"),
			blockText = $("span");

			pointer.on("input", function () {

				pointerValue = pointer.val();

				console.log("$this.pointer.val() = " + pointer.val());
				blockText.text(pointerValue);

				if(pointerValue==10){
					if (confirm("Are you crazy?")) {

						alert("you chose  number 10");
					}else{
						pointer.val(9) ;
                                                blockText.text(pointer.val());

					}
				}
			})
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.corners:active, .corners:hover, .corners:focus{
			outline: none !important;
			outline-offset: 0;
		}
	</style>
</head>
<body>
	<input class="corners" type="range" min="0" max="10" step="1" value="0">
	<span>0</span>
	<script type="text/javascript">
		window.onload=function(){
			var pointer = $(".corners"),
			blockText = $("span");

			pointer.on("change", function () {

				pointerValue = pointer.val();

				console.log("$this.pointer.val() = " + pointer.val());
				blockText.text(pointerValue);

				if(pointerValue==10){
					if (confirm("Are you crazy?")) {

						alert("you chose  number 10");
					}else{
						pointer.val(9) ;
                                                blockText.text(pointer.val());

					}
				}
			})
		}
	</script>
</body>
</html>

Black_Star · #6 (**permalink**) 27.01.2017, 18:44

Сообщение от Dilettante_Pro

Почувствуйте разницу (запускайте по одному примеру с обновлением страницы, чтобы не было паразитного влияния. От режима с input трудно избавиться)

Эммм, разницу я в принципе увидел если пускать через change то параметр значения ползунка не записывается в blockText до того момента пока я его не остановлю. Вот только я не понял чем это должно быть хорошо? Плавного хода нет, отображение - нет. Или я должен был на что то другое смотреть? Так я и не понял почему change лучше

Dilettante_Pro · #7 (**permalink**) 27.01.2017, 22:24

Black_Star,
У меня в хроме на десктопе вариант с инпут при отмене крутится бесконечно. На смартфоне с хромом - нормально

Форум

Справочник

Discord чат

Курсы javascript