еще один вопрос про кнопки и события
начал изучать js, придумываю себе разные задания, возник вопрос:
как лучше организовать такую задумку? имеется набор картинок, которые подвязаны к определенной комбинации клавиш. нажимаем кнопку, или комбинацию кнопок, и получаем изображение. а как реализвать такой принцып: 1.нажимаем кнопку 1 картинка меняется на img1 2.нажимаем кнопку 2 картинка меняется на img2 3.нажимаем кнопку 1 картинка меняется на img3 4.нажимаем кнопку 78 картинка меняется на img4 итд то есть функцию с onclick не получится назначить каждой кнопке. проверять по id изображения какое сейчас, и какая кнопка нажата менять его? или создать массив с последовательностью кнопок, и как то отслеживать нажатия, но как тода быть с комбинациями кнопок? |
Цитата:
Цитата:
Цитата:
|
это пример если на странице имеется 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++;
}
|
по поводу картинок, можно создать массив, или просто переменные.
кнопки: <input type="button" id="1" value="1" > изображение получаем одно. то есть имея определенные комбинации кнопок выводить изображения. грубо говоря есть 5 изображений. 10 кнопок как хочу выводить: 1кнопка-изображение 2 3кнопка-изображение 3 4кнопка-изображение 2 55кнопка-изображение 1 3кнопка-изображение4 76кнопка-изображение 5 4кнопка-изображение 2 как такое можно реализовать? |
Цитата:
.... <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";
}
}
|
Ребята, вопрос не по сабжу, но тоже про кнопки.
Возникла проблема с кнопкой, а именно: после вызова функции 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 кнопка съезжает в сторону, хотя уже и выглядит как блочный элемент. Подскажите, пожалуйста, где тут проблема? |
Цитата:
<!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>
|
Цитата:
Цитата:
Perumov, пример нормальный сделай... |
ksa,
.buy-block-button .button-css-blue - это переопределение правил для конкретного вложенного блока, в основном правиле я указывал block, не посчитал нужным выкладывать все css правила (они не влияли на проблему). Но я уже разобрался в проблеме, спасибо. В этом правиле margin:5px 0 0 0; я добавил левый отрицательный отступ на то расстояние, на которое съезжала кнопка после вызова функции js и все стало красиво. Все равно спасибо! Отдельное спасибо за минус в карму)) |
Цитата:
|
| Часовой пояс GMT +3, время: 01:00. |