Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2013, 12:33
Интересующийся
Отправить личное сообщение для f0rzik Посмотреть профиль Найти все сообщения от f0rzik
 
Регистрация: 15.08.2011
Сообщений: 22

еще один вопрос про кнопки и события
начал изучать js, придумываю себе разные задания, возник вопрос:
как лучше организовать такую задумку?
имеется набор картинок, которые подвязаны к определенной комбинации клавиш.
нажимаем кнопку, или комбинацию кнопок, и получаем изображение.
а как реализвать такой принцып:
1.нажимаем кнопку 1 картинка меняется на img1
2.нажимаем кнопку 2 картинка меняется на img2
3.нажимаем кнопку 1 картинка меняется на img3
4.нажимаем кнопку 78 картинка меняется на img4
итд
то есть функцию с onclick не получится назначить каждой кнопке.
проверять по id изображения какое сейчас, и какая кнопка нажата менять его?
или создать массив с последовательностью кнопок, и как то отслеживать нажатия, но как тода быть с комбинациями кнопок?
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2013, 14:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,113

Сообщение от f0rzik
имеется набор картинок, которые подвязаны к определенной комбинации клавиш
Как именно они "имеются"?

Сообщение от f0rzik
подвязаны к определенной комбинации клавиш.
нажимаем кнопку, или комбинацию кнопок
Что такое "кнопки" и "клавиши"?

Сообщение от f0rzik
нажимаем кнопку, или комбинацию кнопок, и получаем изображение
Одно или несколько?
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2013, 14:20
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

это пример если на странице имеется 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++;
}
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2013, 14:35
Интересующийся
Отправить личное сообщение для f0rzik Посмотреть профиль Найти все сообщения от f0rzik
 
Регистрация: 15.08.2011
Сообщений: 22

по поводу картинок, можно создать массив, или просто переменные.
кнопки:
<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, 14:51
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

Сообщение от 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";
   }
}
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2013, 14:59
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Ребята, вопрос не по сабжу, но тоже про кнопки.
Возникла проблема с кнопкой, а именно: после вызова функции 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 кнопка съезжает в сторону, хотя уже и выглядит как блочный элемент.
Подскажите, пожалуйста, где тут проблема?

Последний раз редактировалось Perumov, 18.01.2013 в 15:08.
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2013, 15:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,113

Сообщение от 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, 18.01.2013 в 15:12.
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2013, 15:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,113

Сообщение от Perumov
хотя css правилом в классе .button-css-blue определено block
Где?
Сообщение от Perumov
.buy-block-button .button-css-blue{
            display:none;
            /*...*/
}
Тут этого нет...


Perumov, пример нормальный сделай...
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2013, 15:24
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

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

Последний раз редактировалось Perumov, 18.01.2013 в 15:27.
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2013, 15:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,113

Сообщение от Perumov
.buy-block-button .button-css-blue - это переопределение правил для конкретного вложенного блока, в основном правиле я указывал block
А с чего ты взял, что то "основное" имеет больший приоритет чем это?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вопрос про создание переменной Gamestop Общие вопросы Javascript 2 04.09.2011 21:48
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Еще один вопрос по setTimeout setInterval Хранитель Света Общие вопросы Javascript 5 12.03.2009 22:37