Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2018, 01:58
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

вставлять переменную в span
Добры день всем, хочу попросит вам помощью.
Есть div class ( page-off ) в нем есть 10 тегов ( a ), внутри div class ( page ) а внутри ( page ) либо img либо span.
хочу создать функцию который при нажатие на div class ( page ) будет проверять --- есть в нем тег img и если есть то выведет alert ('heloo world').
А если нет то в div class ( action ) будет добавятся class ( action-out ) и в span который в div class ( action ) выставляло одна из этих переменных, выбор будет по возрастному порядку то-ист нажата 3-и див будет вставляться 16%.
Заранее благодарю за огромную помощь.

var action1 = '20%';
var action2 = '18%';
var action3 = '16%';
var action4 = '14%';
var action5 = '12%';
var action6 = '10%';
var action7 = '8%';
var action8 = '6%';
var action9 = '4%';
var action10 = '2%';
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2018, 05:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Hovik,
Ответить с цитированием
  #3 (permalink)  
Старый 14.12.2018, 12:29
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

<div class="pages">
<div class="page"><img src="#" alt="#">кнопка 1</div>
<div class="page"><span class="page-txt">кнопка 2</span></div>
<div class="page"><span class="page-txt">кнопка 3</span></div>
<div class="page"><span class="page-txt">кнопка 4</span></div>
<div class="page"><span class="page-txt">кнопка 5</span></div>
<div class="page"><span class="page-txt">кнопка 6</span></div>
<div class="page"><span class="page-txt">кнопка 7</span></div>
<div class="page"><span class="page-txt">кнопка 8</span></div>
<div class="page"><span class="page-txt">кнопка 9</span></div>
<div class="page"><span class="page-txt">кнопка 10</span></div>
</div>

<div class="action">
<span><script> текст + вставляем переменный </script></span>
</div>
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2018, 13:00
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

нажимаем на кнопку 3 и в span вставляется переменный 3 ( var action3 = '16%'; )
Ответить с цитированием
  #5 (permalink)  
Старый 14.12.2018, 13:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Hovik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".pages").addEventListener("click", function(event) {
    var target = event.target;
    if (target = target.closest(".page")) {
      var index = [].indexOf.call(document.querySelectorAll(".pages .page"), target), str = 20 - index * 2 + "%";
      document.querySelector(".action span").innerHTML = str;
      if (target.querySelector("img")) {
        alert("heloo world");
      }
    }
  });
});
  </script>
</head>

<body>
<div class="pages">
<div class="page"><img src="#" alt="#">кнопка 1</div>
<div class="page"><span class="page-txt">кнопка 2</span></div>
<div class="page"><span class="page-txt">кнопка 3</span></div>
<div class="page"><span class="page-txt">кнопка 4</span></div>
<div class="page"><span class="page-txt">кнопка 5</span></div>
<div class="page"><span class="page-txt">кнопка 6</span></div>
<div class="page"><span class="page-txt">кнопка 7</span></div>
<div class="page"><span class="page-txt">кнопка 8</span></div>
<div class="page"><span class="page-txt">кнопка 9</span></div>
<div class="page"><span class="page-txt">кнопка 10</span></div>
</div>

<div class="action">
<span></span>
 </div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2018, 13:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Hovik,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2018, 13:22
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

рони, Все классно Спасибо вам. еще вопрос- а как сделать на оборот то-есть уменьшалось процент 20% - 18 16 14 итл.
и второе в div activ добавлялось класс activ-out
Ответить с цитированием
  #8 (permalink)  
Старый 14.12.2018, 13:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от рони
сделать на оборот то-есть уменьшалось процент 20% - 18 16 14 итл
не понимаю
Сообщение от Hovik
div activ добавлялось класс activ-out
classList
Ответить с цитированием
  #9 (permalink)  
Старый 14.12.2018, 16:00
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

Спасибо за помощь, но не получилось, я поменял кое-что и теперь выставляется переменный, но надо выбрать переменный по моему с помощью for, но не получается не поможете?

var action1 = '20%';
var action2 = '18%';
var action3 = '16%';
var action4 = '14%';
var action5 = '12%';
var action6 = '10%';
var action7 = '8%';
var action8 = '6%';
var action9 = '4%';
var action10 = '2%';


document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".pages").addEventListener( "click", function(event) {
var target = event.target;
if (target = target.closest(".page")) {
var index = [].indexOf.call(document.querySelectorAll(".pages.pa ge"), target), str = 20 - index * 2 + "%";
document.querySelector(".action span").innerHTML = 'тттттттттт' + ' ' + action1 + 'тттттттттттттттттттттттт ттттт:';
if (target.querySelector("img")) {
alert("heloo world");
}
}
});
});

Последний раз редактировалось Hovik, 14.12.2018 в 20:53.
Ответить с цитированием
  #10 (permalink)  
Старый 15.12.2018, 00:37
Кандидат Javascript-наук
Отправить личное сообщение для Hovik Посмотреть профиль Найти все сообщения от Hovik
 
Регистрация: 15.10.2018
Сообщений: 116

Уважаемые рони, возможно вам скорее хочется учить, чем вместо участника написать код, но поверите я пытаюсь просто пока еще не получается и по этому прошу у вас помаши.
Я поменял логику вашего кода, и оно устраивает меня с исключением одного нюанса.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div class="pages">
<div class="page"><img src="#" alt="#">кнопка 1</div>
<div class="page"><span class="page-txt">кнопка 2</span></div>
<div class="page"><span class="page-txt">кнопка 3</span></div>
<div class="page"><span class="page-txt">кнопка 4</span></div>
<div class="page"><span class="page-txt">кнопка 5</span></div>
<div class="page"><span class="page-txt">кнопка 6</span></div>
<div class="page"><span class="page-txt">кнопка 7</span></div>
<div class="page"><span class="page-txt">кнопка 8</span></div>
<div class="page"><span class="page-txt">кнопка 9</span></div>
<div class="page"><span class="page-txt">кнопка 10</span></div>
</div>

<div class="action">
<span>text</span>
</div>








<script>

var action1 = '20%';
var action2 = '18%';
var action3 = '16%';
var action4 = '14%';
var action5 = '12%';
var action6 = '10%';
var action7 = '8%';
var action8 = '6%';
var action9 = '4%';
var action10 = '2%';

document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".pages").addEventListener( "click", function(event) {
var target = event.target;
if (target = target.closest(".page")) {
var index = [].indexOf.call(document.querySelectorAll(".pages.pa ge");
document.querySelector(".action span").innerHTML = 'text' + ' ' + action1 + 'text';
if (target.querySelector("img")) {
alert("heloo world");
}
}
});
});
</script>
</body>
</html>

вместо action1 нужна вставлять функцию который -- будить
сначала выяснять какая из 40 класс page нажата, {например 26-ой}
второе найти остаток от деления к 10 (потому что вариант ответов 10) {результат будет 6 }
третий не знаю по каким образом, но выставлялось шестое переменный action6

Последний раз редактировалось Hovik, 15.12.2018 в 00:46.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить содержимое контейнера в переменную? snovapavel jQuery 0 27.11.2016 04:56
Как в фильтр выборки по атрибуту занести переменную? tanto39 jQuery 9 29.06.2014 01:53
Интересная задача: CheckBox + Span angek Элементы интерфейса 16 27.02.2013 16:22
span внутри span lamer Общие вопросы Javascript 5 11.02.2013 16:50
Как обозначить переменную выбранную в FileChooser? woo_hoo Общие вопросы Javascript 4 03.07.2008 12:58