Форум

f0rzik · #1 (**permalink**) 18.01.2013, 13:33

начал изучать js, придумываю себе разные задания, возник вопрос:
как лучше организовать такую задумку?
имеется набор картинок, которые подвязаны к определенной комбинации клавиш.
нажимаем кнопку, или комбинацию кнопок, и получаем изображение.
а как реализвать такой принцып:
1.нажимаем кнопку 1 картинка меняется на img1
2.нажимаем кнопку 2 картинка меняется на img2
3.нажимаем кнопку 1 картинка меняется на img3
4.нажимаем кнопку 78 картинка меняется на img4
итд
то есть функцию с onclick не получится назначить каждой кнопке.
проверять по id изображения какое сейчас, и какая кнопка нажата менять его?
или создать массив с последовательностью кнопок, и как то отслеживать нажатия, но как тода быть с комбинациями кнопок?

ksa · #2 (**permalink**) 18.01.2013, 15:13

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

имеется набор картинок, которые подвязаны к определенной комбинации клавиш

Как именно они "имеются"?

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

подвязаны к определенной комбинации клавиш.
нажимаем кнопку, или комбинацию кнопок

Что такое "кнопки" и "клавиши"?

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

нажимаем кнопку, или комбинацию кнопок, и получаем изображение

Одно или несколько?

ОлегА · #3 (**permalink**) 18.01.2013, 15:20

это пример если на странице имеется 1 картинка

<input type="button" value="button1" onclick="NextImg();">
<input type="button" value="button2" onclick="NextImg();">
<input type="button" value="button3" onclick="NextImg();">
<input type="button" value="button4" onclick="NextImg();">

var img_num = 1;

function NextImg(){
   document.getElementsByTagName('img')[0].src = "../images/img"+img_num+".png";
   img_num++;
}

f0rzik · #4 (**permalink**) 18.01.2013, 15:35

по поводу картинок, можно создать массив, или просто переменные.
кнопки:
<input type="button" id="1" value="1" >
изображение получаем одно.

то есть имея определенные комбинации кнопок выводить изображения.
грубо говоря есть 5 изображений.
10 кнопок
как хочу выводить:
1кнопка-изображение 2
3кнопка-изображение 3
4кнопка-изображение 2
55кнопка-изображение 1
3кнопка-изображение4
76кнопка-изображение 5
4кнопка-изображение 2

как такое можно реализовать?

ОлегА · #5 (**permalink**) 18.01.2013, 15:51

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

как такое можно реализовать?

ну тогда через массив

....
<input type="button" id="4" value="button4" onclick="NextImg(this);">
....

var img_arr = [1,2,3,2,1,4,5,2];

function NextImg(el){
   id = el.id;
   
   if(img_arr[id] !== undefined){
       document.getElementsByTagName('img')[0].src = "../images/img"+img_arr[id]+".png";
   }
}

Perumov · #6 (**permalink**) 18.01.2013, 15:59

Ребята, вопрос не по сабжу, но тоже про кнопки.
Возникла проблема с кнопкой, а именно: после вызова функции js, нужной кнопке "Уже в корзине" присваивается стиль display:inline; хотя css правилом в классе .button-css-blue определено block, переопределение стиля вызывает проблемы с правильным отображением кнопки "Уже в корзине". Для наглядности код:

<p class="buy-block-button"><a href="#" class="button-css-green" onclick="return false">Купить!</a></p>
<p class="buy-block-button"><a href="#" class="button-css-blue">Уже в корзине</a></p>

.buy-block-button .button-css-blue{
			display:none;
			margin:5px 0 0 0;
			font-size:.78em;
			font-weight:bold;
		}

$(function(){
    $(".buy-block-button .button-css-green").on("click", function(){
        $(".buy-block-button .button-css-green").hide();
        $(".buy-block-button .button-css-blue").show();
    });
});

Скрипт js работает в связке с библиотекой jquery 1.8.3.
Попробовал переопределить стиль через html:

<p class="buy-block-button"><a href="#" class="button-css-blue" style="display:none;">Уже в корзине</a></p>

A в css удалил правило display:none; Но все равно после вызова функции js кнопка съезжает в сторону, хотя уже и выглядит как блочный элемент.
Подскажите, пожалуйста, где тут проблема?

ksa · #7 (**permalink**) 18.01.2013, 16:07

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

как хочу выводить:
1кнопка-изображение 2
3кнопка-изображение 3
4кнопка-изображение 2
55кнопка-изображение 1
3кнопка-изображение4
76кнопка-изображение 5
4кнопка-изображение 2

как такое можно реализовать?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var o={
	1: 2,
	3: 3,
	4: 2,
	55: 1,
	3: 4,
	76: 5,
	4: 2
}
var a=[
	'изображение 1',
	'изображение 2',
	'изображение 3',
	'изображение 4',
	'изображение 5',
];
function go(Id) {
	alert(a[o[Id]-1]);
};
</script>
</head>
<body>
<input type="button" id='3' value="Test 3" onclick="go(this.id);" />
<input type="button" id='55' value="Test 55" onclick="go(this.id);" />
</body>
</html>

ksa · #8 (**permalink**) 18.01.2013, 16:10

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

хотя css правилом в классе .button-css-blue определено block

Где?

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

.buy-block-button .button-css-blue{
            display:none;
            /*...*/
}

Тут этого нет...

Perumov, пример нормальный сделай...

Perumov · #9 (**permalink**) 18.01.2013, 16:24

ksa,
.buy-block-button .button-css-blue - это переопределение правил для конкретного вложенного блока, в основном правиле я указывал block, не посчитал нужным выкладывать все css правила (они не влияли на проблему). Но я уже разобрался в проблеме, спасибо. В этом правиле margin:5px 0 0 0; я добавил левый отрицательный отступ на то расстояние, на которое съезжала кнопка после вызова функции js и все стало красиво. Все равно спасибо! Отдельное спасибо за минус в карму))

ksa · #10 (**permalink**) 18.01.2013, 16:29

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

.buy-block-button .button-css-blue - это переопределение правил для конкретного вложенного блока, в основном правиле я указывал block

А с чего ты взял, что то "основное" имеет больший приоритет чем это?

Форум

Справочник

Discord чат

Курсы javascript