Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2015, 12:29
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

onclick и условие else if
Добрый день. Помогите связать onclick и else if. Скрипт рабочий, но сильно не ругайте. При клике на картинку нужно вывести число в переменную "xmodel". Вешать на каждый onclick свой обработчик громоздко и глупо. Хочется поместить все в один обработчик, который работал с условием else if, но не знаю как.

<script language="JavaScript">

function calc()
{
    var model1 =10;
    xmodel.innerHTML = model1; 
};

function calc2()
{
    var model2 =20;
    xmodel.innerHTML = model2; 
};

function calc3()
{
    var model3 =30;
    xmodel.innerHTML = model3; 
};


</script>

<body>

<img src="simple1.jpg" onclick="calc();" id="image1" border="2"/>
<img src="simple2.jpg" onclick="calc2();" id="image2" border="2"/>
<img src="simple3.jpg" onclick="calc3();" id="image3" border="2"/>

<td> Значение:<span id="xmodel">0</span> руб.</td>

</body>
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2015, 12:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Navilsor,
http://learn.javascript.ru/event-delegation
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2015, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Navilsor,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
document.onclick = function (a) {
    var a = a || window.event,
        a = a.target || a.srcElement,
        b = a.parentNode;
    if (a.nodeName.toLowerCase() == "img") {
        for (var c = 0, a = a.previousSibling; a && a != b;)
        a.nodeName.toLowerCase() == "img" && c++, a = a.previousSibling;
        xmodel.innerHTML = [10, 20, 30][c]
    }

};
</script>
</head>
<body>
<img src="simple1.jpg" id="image1" border="2"/>
<img src="simple2.jpg" id="image2" border="2"/>
<img src="simple3.jpg" id="image3" border="2"/>
<td> Значение:<span id="xmodel">0</span> руб.</td>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2015, 13:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,238

Сообщение от Navilsor
Хочется поместить все в один обработчик
Мои 5коп...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('.image').click(function (){
		$('#xmodel').text($(this).data('value'));
	});
});
</script>
</head>
<body> 
<img src="simple1.jpg" id="image1" class='image' data-value='10' border="2"/>
<img src="simple2.jpg" id="image2" class='image' data-value='20' border="2"/>
<img src="simple3.jpg" id="image3" class='image' data-value='30' border="2"/>
<p>Значение:<span id="xmodel">0</span> руб.</p>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 03.02.2015, 17:18
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

рони, благодарствую за помощь.

Но что если на странице есть еще img, которые должны обрабатываться таким же обработчиком все зависимости от первого? Тогда второй обработчик будет менять img первого. Как избежать? Как разграничить их действия не зависимо друг от друга?
Ответить с цитированием
  #6 (permalink)  
Старый 03.02.2015, 17:25
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

Извиняюсь, разобрался сам

Меняем обработчик страницы document.onclick = function (a) на обработчик function calc(), пишем onclick="calc();" в картинке и готово.
Ответить с цитированием
  #7 (permalink)  
Старый 03.02.2015, 17:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Navilsor,
не понял ни вопроса ни решения - но раз разобрался тоды ок!
Ответить с цитированием
  #8 (permalink)  
Старый 04.02.2015, 07:31
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16


Последний раз редактировалось Navilsor, 04.02.2015 в 07:47.
Ответить с цитированием
  #9 (permalink)  
Старый 05.02.2015, 08:15
Аватар для Navilsor
Интересующийся
Отправить личное сообщение для Navilsor Посмотреть профиль Найти все сообщения от Navilsor
 
Регистрация: 15.01.2015
Сообщений: 16

Хочу что-бы в условии if , выполнялось другое условие if, например изменялось толщина border вокруг элемента. Переменную беру из первого условия, в блоке присваиваю border="0". Что не так?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
document.onclick = function (a) {
    var a = a || window.event,
        a = a.target || a.srcElement,
        b = a.parentNode;
    if (a.nodeName.toLowerCase() == "img") {
        for (var c = 0, a = a.previousSibling; a && a != b;)
        a.nodeName.toLowerCase() == "img" && c++, a = a.previousSibling;
        xmodel.innerHTML = [10, 20, 30][c]
          var border0 = xmodel.innerHTML;
              if  (border0 = 10)
                {
                  <img src="simple1.jpg" id="image1" border="2"/>
                  <img src="simple2.jpg" id="image1" border="0"/>
                  <img src="simple3.jpg" id="image1" border="0"/>
                }
              else
                 if  (border0 = 20)
                 {
                  <img src="simple1.jpg" id="image1" border="0"/>
                  <img src="simple2.jpg" id="image1" border="2"/>
                  <img src="simple3.jpg" id="image1" border="0"/>
                 }
                 else
                 {
                  <img src="simple2.jpg" id="image1" border="0"/>
                  <img src="simple2.jpg" id="image1" border="0"/>
                  <img src="simple3.jpg" id="image1" border="2"/>
                 };
                
              };
    }

};
</script>
</head>
<body>
<img src="simple1.jpg" id="image1" border="0"/>
<img src="simple2.jpg" id="image2" border="0"/>
<img src="simple3.jpg" id="image3" border="0"/>
<td> Значение:<span id="xmodel">0</span> руб.</td>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 05.02.2015, 08:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,238

Сообщение от Navilsor
в блоке присваиваю border="0". Что не так?
Это вообще какой язык (с 16 по 36)?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отследить открытие ссылки само по себе, без onclick lancer Events/DOM/Window 28 19.11.2011 19:40
onclick по блоку в котором есть ссылки dr_gluk jQuery 2 17.11.2011 15:37
OnClick ячейки таблицы и ссылки в этой ячейке MasDen Javascript под браузер 2 30.06.2011 10:34
Как избавиться от каскадного onclick? GydruS Events/DOM/Window 2 24.02.2011 11:54
Событие onClick avtor01 Events/DOM/Window 3 03.09.2009 18:01