Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
1

Формирование меню выбора пунктов режима

14.12.2023, 15:01. Показов 851. Ответов 14
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте!
Если Вас не затруднит, не поможете найти ответы.

Реализую меню выбора пунктов режима.
• после выбора пункта Режим-1, а потом Режим-2 - у Режим-1 восстанавливаются цвета, но
пропадает выделение подсветкой фона при наведении на пункт Режим-1 Мышкой.
? Не понял причину - как понимаю, за это отвечает .d:hover, который не трогал
• что лучше использовать для кнопок выбора input/div или нет разницы?
• в зависимости от выбора Режима, в окне 2 должен появляться список подрежимов.
Для какого-то пункта (напр, режим-1) подрежимов может не быть, и их количество зависит от выбранного режима (скажем 5 и 2 для Режимов 2 и 3)
? что посоветуете использовать для их вывода и обработки ?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style>
.frm1 {
 margin-top: 10px;
 height: 40px;
 border: solid 2px green;
 background: LemonChiffon;
 color: blue;
}
 
 .but2 {
   float: none;
   color: blue;
   background: LemonChiffon;
   border: 0;
   font-size: 25px; 
   //line-height: 40px; 
 } 
 
 .but2.d:hover {
  background: green; 
    margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
  color: white; 
 }
 </style>
HTML5
1
2
3
4
5
6
7
8
9

<div class= "frm1"> 
 <input type="button" id="i1" value=" Режим-1" onclick="g_inp('1');" class="but2 d" >
 <input type="button" id="i2" value=" Режим-2" onclick="g_inp('2');" class="but2 d">
 <input type="button" id="i3" value=" Режим-3" onclick="g_inp('3');" class="but2 d" >
</div>
 
<!-- Область для подрежимов-->
<div id= "reg2" class= "frm1" style="height: 80px;"> 
</div>

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
 
function g_inp (i_gor)  {
 
  if (i_gor_old != 0)   {
   s= 'i' + i_gor_old;
   document.getElementById(s).style.color = "blue";  
   document.getElementById(s).style.background = "LemonChiffon";
 
  }
   s= 'i' + i_gor;
   document.getElementById(s).style.color = "white";
   document.getElementById(s).style.background = "red";
  // alert(" id = "+ p_id);
  i_gor_old = i_gor;
}
</script>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 14.12.2023, 15:01
Ответы с готовыми решениями:

Посоветуйте как организовать формирование пунктов меню из БД на ASP.NET
Посоветуйте как организовать формирование пунктов меню из БД на ASP.NET

Меню должно снова работать после выбора одного из пунктов
Есть меню, реализованное через case, при выборе пункта происходят нужные действия, и затем...

Создать меню, которое работает по принципу выбора определенных пунктов с помощью стрелочек
Создать небольшое меню, которое работает по принципу выбора определенных пунктов с помощью...

Дана матрица N*N. Создать текстовое меню для возможности выбора решения любого из 2 пунктов
Добрый день! Дана матрица N*N. Создать текстовое меню для возможности выбора решения любого из 3...

Создание программы, в которой используется меню, состоящее из нескольких пунктов выбора желаемого действия
Здравствуйте, форумчане! Помогите пожалуйста решить задачу. Не могу сообразить, как нужно делать,...

14
2992 / 1166 / 315
Регистрация: 14.03.2022
Сообщений: 2,833
14.12.2023, 16:51 2
Цитата Сообщение от dav60 Посмотреть сообщение
после выбора пункта Режим-1, а потом Режим-2 - у Режим-1 восстанавливаются цвета, но
пропадает выделение подсветкой фона при наведении на пункт Режим-1 Мышкой.
? Не понял причину
Я убрал твою "кашу". Просто использую класс on...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.frm1 {
    margin-top: 10px;
    height: 40px;
    border: solid 2px green;
    background: LemonChiffon;
    color: blue;
}
.but2 {
    float: none;
    color: blue;
    background: LemonChiffon;
    border: 0;
    font-size: 25px; 
    //line-height: 40px; 
} 
.but2.on {
    color: white;
    background-color: red;
} 
.but2.d:hover {
    background: green; 
    margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
    color: white; 
}
</style>
</head>
<body>
<div class= "frm1"> 
    <input type="button" id="i1" value=" Режим-1" class="but2 d" />
    <input type="button" id="i2" value=" Режим-2" class="but2 d" />
    <input type="button" id="i3" value=" Режим-3" class="but2 d" />
</div>
 
<!-- Область для подрежимов-->
<div id= "reg2" class= "frm1" style="height: 80px;"> 
</div>
 
 
 
<script>
document.querySelector('.frm1').addEventListener('click', e => {
    const o = e.target.closest('.but2')
    if (!o) return
    o.classList.toggle('on')
})
 
 
 
</script>
</body>
</html>
1
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
14.12.2023, 17:51  [ТС] 3
Спасибо за внимание, но к сожалению этот вариант не решает моих задач:
• если выбран пункт (красный фон), то зеленым он уже не должен подсвечиваться (ибо в настоящий момент он активный) - что у меня было решено (к тому, что только обращаю внимание, как должно работать)
• кнопки должны работать как переключатели (только один активный пункт) - нажимая на новый режим, тот, который был активным, должен принять старые цвета.
В предложенном Вами варианте надо нажать повторно, чтобы его погасить

• и есть еще момент, для формирования списка подрежимов надо получить признак, какой из input был нажат - да, видел, можно выделить id инпута, но я его передаю в параметрах функции и его уже не надо вычислять. Но вполне возможно, что чего-то не понимаю, поэтому только высказываю соображения.
Кроме того много знающий по его словам программист, и думаю, что это так, мне доказывал, что пустой список подрежимов (зависимый) вывести физически нельзя при использовании тегов и css. Хотя и допускаю, что он мог ошибаться и не знал, как реализовать такой вывод с помощью css.

В принципе, один вариант я знаю, как реализовать - используя type = 'hidden', когда список подрежимов пуст, но, возможно, это также неразумный в плане программирования вариант, поэтому и обратился за советами.

Ps.
В любом случае, если кто сможет подсказать, почему у меня отключается подсветка фоном при наведении мышкой, был бы очень признателен

Добавлено через 11 минут
Подумал ранее, что для варианта, если надо выбрать несколько пунктов - данный вариант подходит, но сейчас обнаружил еще один серьезный минус - при нажатии на кнопку - она как была зеленой, так такой и остается до тех пор, пока мышку не уберешь с кнопки.
Хотя каким-то образом все это средствами html и css последнее решается. Да и как переключатель также видел.
0
2992 / 1166 / 315
Регистрация: 14.03.2022
Сообщений: 2,833
14.12.2023, 20:23 4
Цитата Сообщение от dav60 Посмотреть сообщение
если выбран пункт (красный фон), то зеленым он уже не должен подсвечиваться
Добавь стилей...
CSS
1
2
3
4

.but2.on.d:hover {
    background: ???; 
    color: ???; 
}
Добавлено через 1 минуту
Цитата Сообщение от dav60 Посмотреть сообщение
кнопки должны работать как переключатели (только один активный пункт)
Удаляй класс on у других и вешай текущему элементу...
0
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
15.12.2023, 09:26  [ТС] 5
Спасибо, krvsa.

Цитата Сообщение от krvsa Посмотреть сообщение
Удаляй класс on у других и вешай текущему элементу...
Вчера появилась такая мысль: можно ли через джаваскрипт влиять на классы - очень полезный совет. Буду разбираться.

Цитата Сообщение от krvsa Посмотреть сообщение
Я убрал твою "кашу". Просто использую класс on...
Интересно было бы услышать, почему каша ?

Например, хочу установить характеристики для:
Автор: Страна / Пол / ...
Книги: Жанр / Год написания / ...
И не хочу использовать выпадающие списки, а список подрежимов. например, при выборе жанра выводятся типы жанров, а при "год написания" - список периодов

Как раз, как мне кажется, удобнее использовать для автора и книг разные функции, чтобы не было "каши".
0
2992 / 1166 / 315
Регистрация: 14.03.2022
Сообщений: 2,833
15.12.2023, 11:59 6
Цитата Сообщение от dav60 Посмотреть сообщение
Интересно было бы услышать, почему каша ?
Потому что много чего из твоего html и js можно просто выкинуть...
"Каша" это образное выражение. Ассоциация с приготовлением пищи...
Если неумелый повар начнет делать тот же плов - большая вероятность что он приготовит не плов, а кашу.
Такая же ситуация с приготовлением супа... Неопытный поваренок может переборщить с крупами и получит в итоге кашу.

Если ты не силен в готовке - термин "каша" будет непонятен.

Добавлено через 3 минуты
Цитата Сообщение от dav60 Посмотреть сообщение
Как раз, как мне кажется, удобнее использовать для автора и книг разные функции, чтобы не было "каши".
Пока не особо у тебя получается...
Поскольку выше ты описал абсолютно аналогичные действия, но собрался их делать "раздельно".
Для более детального совета нужен очередной тестовый пример от тебя.
0
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
15.12.2023, 18:05  [ТС] 7
krvsa, то, что каша - было образно - понял. Хотел написать, что, ког87да писал ответ, взял в кавычки, оказалось, был невнимателен - только во второй раз.

На счет удалить, css не имею в виду, а в html удалять нечего, там только три input, если же удалить что-то из js, код перестанет работать - в таком же виде он работает. Область же div id= "reg2" - она не лишняя, указал специально, в ней должны размещаться подрежимы, в зависимости от выбранного пункта.

если же сравнивать наши примеры по количеству операторов, то не думаю, что сильно отличаются: в моем примере чуть больше, но в первую очередь за счет if - но он нужен для дальнейших действий.

• Пока не готов представить "очередной тестовый пример" - для этого вначале должен разобраться с присланным вариантом (иначе это было бы неуважением), а для этого нужно время, ибо в нем присутствуют объекты, которые сразу не могу понять, в том числе из-за отсутствия теоретических знаний.

Ps. Чтобы правильно меня поняли, при отсутствии знаний ничего не доказываю - просто некоторые моменты в плане логики вызывают сомнения, которые и высказываю.

В любом случае спасибо за ответ
0
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
21.12.2023, 09:27  [ТС] 8
Вот пример того, что хотел бы приблизительно видеть.
Правда, добавив вывод подрежимов, пока не понял, почему перестал восстанавливаться цвет для режима 2

Сделал в своем стиле, потому что пока не знаю иной.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.ur1 {
 display: block;
 width: 520px;
 margin: 5px;
  background: dodgerblue;
  color: white;
}
 
.ur2 {
  display: inline;
  width: 250px;
  margin-left: 5px;
  background: green;
  color: white;
}
 
.ur2_c {
  display: none;        /* display: flex;  */
 /* justify-content: space-around; /* равномерно по горизонтали */
  padding: 0 10px 10px 10px; /* поля для блока с чекбоксами */
}
.ur2_c .ur3 {
  display: flex;
  flex-direction: column;
width: 150px;
 background: green;
 margin: 5px;
}
.ur2_c .ur3  input[type=checkbox]{
  margin-right: 0.5em; /* отступ от каждого чек-бокса справа */
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class= "ur1">
 <input type="button" id="i1" value=" Режим-1" onclick="g_inp('1');" class="but2 d" >
 <input type="button" id="i2" value=" Режим-2" onclick="g_inp('2');" class="but2 d">
 <input type="button" id="i3" value=" Режим-3" onclick="g_inp('3');" class="but2 d" >
</div>  
 
<div class= "ur1">
  <div  id="ii1" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 1</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
    <div class= "ur3">
        <b>Заголовок 2</b><Br>
      <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
      <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
 
  <div  id="ii3" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 3</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 var i_gor= 0;
 var i_gor_old= 0;
 
function g_inp (i_gor)  {
  if (i_gor_old != 0)   {
   s= 'i' + i_gor_old;
   document.getElementById(s).style.color = "blue";  
   document.getElementById(s).style.background = "LemonChiffon";
    if (i_gor_old != 2)     {
        s= 'ii' + i_gor_old;
        document.getElementById(s).style.display = "none"; 
    }
  }
 
   s= 'i' + i_gor;
   document.getElementById(s).style.color = "white";
   document.getElementById(s).style.background = "red";
    if (i_gor_old != 2)     {
        s= 'ii' + i_gor;
        document.getElementById(s).style.display = "flex"; 
    }
  i_gor_old = i_gor;
  
}
0
111 / 145 / 32
Регистрация: 03.09.2018
Сообщений: 499
21.12.2023, 18:02 9
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Находим div-ы с атрибутом data-tab
document.querySelectorAll('[data-tab]').forEach(tabContainer => {
    const tabName = tabContainer.getAttribute('data-tab') || false;
    if(!tabName) {
        return;
    }
    
    // Находим div с атрибутом data-tab-content
    const tabContentContainer = document.querySelector(`[data-tab-content="${tabName}"]`);
 
    // Находим все кнопки табов внутри div с атрибутом data-tab
    const buttons = tabContainer.querySelectorAll('input[type="button"]');
 
    // Добавляем обработчик клика на каждую кнопку
    buttons.forEach(button => {
      button.addEventListener('click', () => {
        const contentId = button.getAttribute('data-content-id') || '';
        const activeColor = button.getAttribute('data-button-active-color') || 'red';
        const contentColor = button.getAttribute('data-content-color') || 'blue';
 
        // Устанавливаем цвет активной кнопки
        buttons.forEach(btn => {
          btn.style.backgroundColor = btn === button ? activeColor : '';
        });
 
        // Показываем выбранный контент и скрываем остальные
        const content = tabContentContainer.querySelector(`[data-tab-content-id="${contentId}"]`);
        tabContentContainer.querySelectorAll('[data-tab-content-id]').forEach(item => {
          item.style.display = item === content ? 'flex' : 'none';
          item.style.backgroundColor = item === content ? contentColor : '';
        });
      });
    });
});
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class= "ur1" data-tab="id_tab">
 <input type="button" value="Режим-1" class="but2 d" data-content-id="ii1" data-content-color="aqua">
 <input type="button" value="Режим-2" class="but2 d" data-content-id="ii2" data-button-active-color="aqua">
 <input type="button" value="Режим-3" class="but2 d" data-content-id="ii3">
</div>  
 
<div class= "ur1" data-tab-content="id_tab">
  <div  data-tab-content-id="ii1" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 1</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
    <div class= "ur3">
        <b>Заголовок 2</b><Br>
      <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
      <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
 
  <div  data-tab-content-id="ii3" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 3</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
</div>
Добавлено через 1 минуту
И да, данный код будет корректно работать с такой вёрсткой

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div class= "ur1" data-tab="id_tab">
 <input type="button" value="Режим-1" class="but2 d" data-content-id="ii1" data-content-color="aqua" data-button-active-color="red">
 <input type="button" value="Режим-2" class="but2 d" data-content-id="ii2" data-content-color="blue" data-button-active-color="aqua">
 <input type="button" value="Режим-3" class="but2 d" data-content-id="ii3" data-content-color="blue" data-button-active-color="red">
</div>  
 
<div class= "ur1" data-tab-content="id_tab">
  <div  data-tab-content-id="ii1" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 1</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
    <div class= "ur3">
        <b>Заголовок 2</b><Br>
      <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
      <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
 
  <div  data-tab-content-id="ii3" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 3</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
</div>
 
 
<div class= "ur1" data-tab="id_tab2">
 <input type="button" value="Режим-1" class="but2 d" data-content-id="ii1" data-content-color="aqua" data-button-active-color="red">
 <input type="button" value="Режим-2" class="but2 d" data-content-id="ii2" data-content-color="blue" data-button-active-color="aqua">
 <input type="button" value="Режим-3" class="but2 d" data-content-id="ii3" data-content-color="blue" data-button-active-color="red">
</div>  
 
<div class= "ur1" data-tab-content="id_tab2">
  <div  data-tab-content-id="ii1" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 1</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
    <div class= "ur3">
        <b>Заголовок 2</b><Br>
      <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
      <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
 
  <div  data-tab-content-id="ii3" class= "ur2_c">
    <div class= "ur3">
        <b>Заголовок 3</b><Br>
        <label><input type="checkbox" name="tg2" value="11">Парам_1</label>
        <label><input type="checkbox" name="tg2" value="12">Парам_2</label>
    </div>
  </div>
</div>
1
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
22.12.2023, 10:06  [ТС] 10
Спасибо огромное, Именч, это действительно то, что хотел видеть.
И отдельное спасибо за комментарии.

Вот только интересно было бы услышать мнение: имеет ли место быть мой код: вроде бы он по количеству операторов примерно равен Вашему, по скорости обработки мне кажется они также примерно одинаковы ?
0
62 / 50 / 13
Регистрация: 10.11.2023
Сообщений: 111
22.12.2023, 11:23 11
dav60, javascript не измеряют количеством операторов
можно ознакомиться habr.com Основы внутреннего устройства JavaScript

Многие люди по-прежнему считают, что JavaScript — это интерпретируемый язык, но это уже не так. Вместо простой интерпретации современные движки JavaScript используют комбинацию компиляции и интерпретации, называемую компиляцией Just-in-time(JIT).

При таком подходе весь код компилируется в машинный код и сразу же исполняется. То есть присутствуют два этапа обычной предварительной компиляции, но портируемого исполняемого файла нет. И исполнение происходит сразу же после компиляции. Это идеально подходит для JavaScript, потому что это намного быстрее, чем просто исполнение строка за строкой.


Чтобы уменьшить размер файлов и ускорить загрузку веб страниц есть минификаторы.
Минификацию делают перед загрузкой на сервер .
только зачем об этом думать,если ваш скрипт работает неверно ?
1
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
22.12.2023, 17:08  [ТС] 12
Спасибо за информацию, ZeroKara.
Действительно, относился к категории - многие - также считал, что JavaScript - интерпретируемый язык.

Но ведь на наш случай компилируемый язык или нет - это не распространяется - оба варианта компилируются, главное чтобы оба были рабочими.

Цитата Сообщение от ZeroKara Посмотреть сообщение
только зачем об этом думать,если ваш скрипт работает неверно ?
Ну почему же ? У меня все работает (по крайней мере у меня на опере) за исключением того, что сбивается подсветка ссылок, после того как восстанавливаю цвета активной ссылки командой document.getElementById(s).style.background и color- такое впечатление, что она изменяет и свойства подсветки input - не думаю, что это нерешаемая проблема - и для понимания постараюсь поискать ответ - быстрей всего он может пригодиться и в дальнейшем независимо от способа программирования.

И, если получится найти ответ, будут два решения: мой, который мне понятен и Именча, для применения которого надо вначале понять многие термины его решения. Но, если мой вполне применяемый, я бы отложил изучение теории на более позднее время.
Поэтому и пытаюсь понять, чем он плох, чтобы от него отказаться. Ибо не могу не учесть мнение krvsa, что у меня в голове "каша", хотя и не понимаю, почему - вроде бы у меня все просто и логично.
1
62 / 50 / 13
Регистрация: 10.11.2023
Сообщений: 111
22.12.2023, 19:56 13
Цитата Сообщение от dav60 Посмотреть сообщение
Ну почему же ? У меня все работает
Цитата Сообщение от ZeroKara Посмотреть сообщение
ваш скрипт работает неверно ?
Ой. извините. Это я образно. Не конкретно Ваш скрипт.
Нет смысла минифицировать программу, которая делает не то что нужно,
выдает неверный ответ или сыпется ошибками.
1
111 / 145 / 32
Регистрация: 03.09.2018
Сообщений: 499
22.12.2023, 22:51 14
Цитата Сообщение от dav60 Посмотреть сообщение
имеет ли место быть мой код: вроде бы он по количеству операторов примерно равен
Их даже и близко нельзя сравнивать, совершенно разный подход. Я заранее разметил вёрстку нужными атрибутами, указав в них связи между другими элементами. И дальше через JS реализовал проход по данным атрибутам, связав их окончательно по функционалу.

Данный вариант на JS реализуется повсеместно. Тот же bootstrap и иные фреймворки, такой тип взаимосвязи используют.

Цитата Сообщение от dav60 Посмотреть сообщение
по скорости обработки мне кажется они также примерно одинаковы ?
Нет, обработчик click мною установленный, уже знает заранее с какими элементами он будет работать. А ваш код, постоянно пытается найти во всём документе нужный id посредством document.getElementById. Хотя скорее данная функция постоянно кэширует все элементы на моменте загрузки html

Добавлено через 2 минуты
Цитата Сообщение от Именч Посмотреть сообщение
заранее с какими элементами он будет работать.
На это кстати тоже надо обратить внимания, если нету динамических элементов, это будет прекрасно работать. А если есть, то нужно по другому реализовывать скрипт.
1
1 / 1 / 0
Регистрация: 08.03.2019
Сообщений: 81
23.12.2023, 17:04  [ТС] 15
Цитата Сообщение от ZeroKara Посмотреть сообщение
Ой. извините. Это я образно.
Ну что Вы, совершенно нет оснований для извинений - меня не задевает критика, я ее только приветствую - она может помочь найти более правильное решение.

И отдельная благодарность Именчу, за обстоятельное разъяснение причин минусов моего кода.
0
23.12.2023, 17:04
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 23.12.2023, 17:04
Помогаю со студенческими работами здесь

Добавить меню выбора режима шифрование, расшифровка. Проверку цифр ( если отрицательное число-ошибка)
Добавить меню выбора режима шифрование, расшифровка. Проверку цифр ( если отрицательное...

Как сделать, чтобы при перезагрузке появлялось меню выбора ОСь, а не востановление Windows из спящего режима?
У меня есть несколько ос (все 3 - виндовс). Часто приходится перезагружаться. Часто юзаю для XP...

Написать функцию выбора пунктов меню стрелками "вверх" "вниз"
Доброго всем времени суток.Пожалуйста подскажите как мне справиться с моей проблемой.Нужно...

После выбора варианта загрузки система виснет - Windows XP . загрузка идет тока с выбора безопасного режима
вот видио Кто знает что такое ?

Центровка пунктов в выпадающем меню по центру ul блока (Битрикс меню)
Всем привет! Требуется в выпадающем меню, т.е. в самых блоках выпадающего меню, сделать чтобы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru