ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Шаблон
23 сообщений из 23, страница 1 из 1
Шаблон
    #39837438
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Есть шаблон, например:

Код: html
1.
2.
3.
4.
<div id="template">
     <div id="myVal">0<div>
     <input id="btn" type="button">
</div>


Этот шаблон будет добавляться на страницу
десяток раз.
При нажатии на кнопку #btn конкретного экземпляра шаблона
значение div#myVal этого экземпляра шаблона будет меняться
скажем на 1.
(Я понимаю, что id уникален в пределах страници и
наверное вместо id нужно юзать class)
Как это грамотно реализовать?


C ув. Tors
...
Рейтинг: 0 / 0
15.07.2019, 14:00
| Ответить | Цитировать | Написать  
Шаблон
    #39837483
OldMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
OldMaster
Гость
Как-то так
Код: 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.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).on('click', '.template .btn', function(){
            var template = $(this).parent('.template');
            var myVal = template.children('.myVal');
            myVal.text('1');
        });
    </script>
</head>
<body>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>    
</body>
</html>
...
Рейтинг: 0 / 0
15.07.2019, 15:15
| Ответить | Цитировать | Написать  
Шаблон
    #39837509
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
OldMasterКак-то так
Или так...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$(document).on('click', '.template .btn', function(){
		$(this).prev('.myVal').text('1');
	});
});
</script>
</head>
<body>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>
    <div class="template">
        <div class="myVal">0</div>
        <input class="btn" type="button" value="Кнопка">
    </div>    
</body>
</html>
...
Рейтинг: 0 / 0
15.07.2019, 15:47
| Ответить | Цитировать | Написать  
Шаблон
    #39837622
OldMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
OldMaster
Гость
авторИли так...
Вообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
Код: javascript
1.
$(this).parents('.template').find('.myVal').text('1');


Но если разметка блоков .template меняться не будет, то можно и так.
...
Рейтинг: 0 / 0
15.07.2019, 21:12
| Ответить | Цитировать | Написать  
Шаблон
    #39837632
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
tors,
можно и так
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
       <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="Кнопка">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="Кнопка">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="Кнопка">
        </div>    
        <script>
            document.querySelector('body').addEventListener('click', function (ex) {
                var d = ex.target;
                if (d.tagName === 'INPUT') {
                    var e = d.closest('.template').querySelector('.myVal');
                    e.innerHTML = parseInt(e.innerHTML) + 1;
                }
            });
        </script>
...
Рейтинг: 0 / 0
15.07.2019, 22:07
| Ответить | Цитировать | Написать  
Шаблон
    #39837690
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
OldMasterВообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
Вообще, в идеале нужно просто делать конкретную задачу.
...
Рейтинг: 0 / 0
16.07.2019, 07:29
| Ответить | Цитировать | Написать  
Шаблон
    #39837788
Дмитрий Мух
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий Мух
Участник
OldMasterВообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
А можно ещё через дата-атрибуты, "чтобы не привязываться к конкретному расположению элементов внутри блока" :)
...
Рейтинг: 0 / 0
16.07.2019, 11:24
| Ответить | Цитировать | Написать  
Шаблон
    #39837790
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Дмитрий МухА можно ещё через дата-атрибуты,в данном случае чем отличаются дата-атрибуты от класса?
...
Рейтинг: 0 / 0
16.07.2019, 11:33
| Ответить | Цитировать | Написать  
Шаблон
    #39837801
Дмитрий Мух
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий Мух
Участник
вадяДмитрий МухА можно ещё через дата-атрибуты,в данном случае чем отличаются дата-атрибуты от класса?
По условию задачи нужно изменить значение у целевого элемента.

Пример генерируемой разметки:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<div id="template_01">
     <div id="myVal_01">0<div>
     <input class="clickMe" data-targetId="myVal_01" type="button">
</div>
<div id="template_02">
     <div id="myVal_02">0<div>
     <input class="clickMe" data-targetId="myVal_02" type="button">
</div>
<div id="template_03">
     <div id="myVal_03">0<div>
     <input class="clickMe" data-targetId="myVal_03" type="button">
</div>


Идея понятна?
...
Рейтинг: 0 / 0
16.07.2019, 11:47
| Ответить | Цитировать | Написать  
Шаблон
    #39837980
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Дмитрий МухПример генерируемой разметки:
torsшаблон будет добавляться на страницу
это несколько разные понятия
...
Рейтинг: 0 / 0
16.07.2019, 17:17
| Ответить | Цитировать | Написать  
Шаблон
    #39838046
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Можно даже без всяких классов, используя делегирование событий:
Код: 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.
<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      margin-top: 4px;
      width: 24px;
    }
    
    span {
      margin-left: 4px;
    }
  </style>
</head>
<body>
  <div>
    <button data-counter-id="counter-01" data-increment>+</button>
    <button data-counter-id="counter-01" data-decrement>-</button>
    <span id="counter-01">0</span>
  </div>
  <div>
    <button data-counter-id="counter-02" data-increment>+</button>
    <button data-counter-id="counter-02" data-decrement>-</button>
    <span id="counter-02">0</span>
  </div>
  <div>
    <button data-counter-id="counter-03" data-increment>+</button>
    <button data-counter-id="counter-03" data-decrement>-</button>
    <span id="counter-03">0</span>
  </div>
  <script>
    document.onclick = function(event) {
      var target = event.target;
          elemId = target.getAttribute('data-counter-id');

      if (elemId) {
        var elem = document.getElementById(elemId);

        if (target.hasAttribute('data-increment')) {
          elem.innerHTML++;
        }

        if (target.hasAttribute('data-decrement')) {
          elem.innerHTML--;
        }
      }
    };
  </script>
</body>
</html>


Это шаблон проектирования, называемый «поведение» (behavior).
Когда ты атрибутами (декларативно) описываешь, что одна кнопка вызывает инкремент значения вот в этом элементе, а другая вызывает декремент.
...
Рейтинг: 0 / 0
16.07.2019, 19:27
| Ответить | Цитировать | Написать  
Шаблон
    #39838062
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,

проблема в том , что у тебя все элементы разные. отличие есть в атрибутах. при таком варианте проблем нет. у ТС не так. (по крайней мере в приведенной постановке здесь задачи)
...
Рейтинг: 0 / 0
16.07.2019, 20:42
| Ответить | Цитировать | Написать  
Шаблон
    #39838069
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
тогда уж так
Код: 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.
    <body>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" data-x="1" value="Кнопка+">
            <input class="btn" type="button" data-x="-1" value="Кнопка-">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" data-x="1" value="Кнопка+">
            <input class="btn" type="button" data-x="-1" value="Кнопка-">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" data-x="1" value="Кнопка+">
            <input class="btn" type="button" data-x="-1" value="Кнопка-">
        </div>    
        <script>
            document.querySelector('body').addEventListener('click', function (ex) {
                var d = ex.target;
                if (d.tagName === 'INPUT') {
                    var e = d.closest('.template').querySelector('.myVal');
                    e.innerHTML = parseInt(e.innerHTML) + parseInt(d.dataset.x);
                }
            });
        </script>
    </body>
...
Рейтинг: 0 / 0
16.07.2019, 20:59
| Ответить | Цитировать | Написать  
Шаблон
    #39838073
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
или так
Код: 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.
    <body>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="+">
            <input class="btn" type="button" value="-">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="+">
            <input class="btn" type="button" value="-">
        </div>
        <div class="template">
            <div class="myVal">0</div>
            <input class="btn" type="button" value="+">
            <input class="btn" type="button" value="-">
        </div>    
        <script>
            document.querySelector('body').addEventListener('click', function (ex) {
                var d = ex.target;
                if (d.tagName === 'INPUT') {
                    var e = d.closest('.template').querySelector('.myVal');
                    d.value==='+'?e.innerHTML++:e.innerHTML--;
                }
            });
        </script>
    </body>
...
Рейтинг: 0 / 0
16.07.2019, 21:08
| Ответить | Цитировать | Написать  
Шаблон
    #39838257
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадя,

свойство dataset - это хорошо, но поддержку IE 9 и IE 10 пока ещё никто не отменял
и опираться на на input.value не стоит... вдруг по дизайну будет стрелка вверх и стрелка вниз
...
Рейтинг: 0 / 0
17.07.2019, 12:14
| Ответить | Цитировать | Написать  
Шаблон
    #39838293
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадя,

свойство dataset - это хорошо, но поддержку IE 9 и IE 10 пока ещё никто не отменял
и опираться на на input.value не стоит... вдруг по дизайну будет стрелка вверх и стрелка вниз
dataset - ну тут дело конкретики..
а вдруг бывает только пук...
...
Рейтинг: 0 / 0
17.07.2019, 13:43
| Ответить | Цитировать | Написать  
Шаблон
    #39838344
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяа вдруг бывает только пук...
и ты по каждому такому пуку меняешь код, кросавчег :)

а вот тем, кто не горит желанием этим страдать, советую не зашиваться на то, что написано на кнопке
...
Рейтинг: 0 / 0
17.07.2019, 15:05
| Ответить | Цитировать | Написать  
Шаблон
    #39838373
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAи ты по каждому такому пуку меняешь код, кросавчег :) а нафига сам написал на кнопке + и - ?
и смотри предыдущий мой пример - там без привязки к value....
...
Рейтинг: 0 / 0
17.07.2019, 15:53
| Ответить | Цитировать | Написать  
Шаблон
    #39838388
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяа нафига сам написал на кнопке + и - ?Для того, чтобы аккуратно выглядело, посмотреть можно тут: https://plnkr.co/edit/ACCx0SlrlvD1CiJ9G7WF?p=preview

вадяи смотри предыдущий мой пример - там без привязки к value....Смотрел. Комментарий про dataset как раз к нему и относится
...
Рейтинг: 0 / 0
17.07.2019, 16:39
| Ответить | Цитировать | Написать  
Шаблон
    #39838403
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAДля того, чтобы аккуратно выглядело, посмотреть можно тут: https://plnkr.co/edit/ACCx0SlrlvD1CiJ9G7WF?p=preview ты ссылку проверял?
...
Рейтинг: 0 / 0
17.07.2019, 17:08
| Ответить | Цитировать | Написать  
Шаблон
    #39838433
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAДля того, чтобы аккуратно выглядело, посмотреть можно тут: https://plnkr.co/edit/ACCx0SlrlvD1CiJ9G7WF?p=preview ты ссылку проверял?конечно, в том числе и в режиме инкогнито

а что, какие-то проблемы?
...
Рейтинг: 0 / 0
17.07.2019, 18:16
| Ответить | Цитировать | Написать  
Шаблон
    #39838447
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAа что, какие-то проблемы?
Код: plaintext
1.
2.
3.
4.
5.
Не удается получить доступ к сайту Соединение сброшено.
Попробуйте сделать следующее:

Проверьте подключение к Интернету.
Проверьте настройки прокси-сервера и брандмауэра.
ERR_CONNECTION_RESET
...
Рейтинг: 0 / 0
17.07.2019, 19:17
| Ответить | Цитировать | Написать  
Шаблон
    #39838964
Дмитрий Мух
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий Мух
Участник
вадяskyANAа что, какие-то проблемы?
Код: plaintext
1.
2.
3.
4.
5.
Не удается получить доступ к сайту Соединение сброшено.
Попробуйте сделать следующее:

Проверьте подключение к Интернету.
Проверьте настройки прокси-сервера и брандмауэра.
ERR_CONNECTION_RESET

ERR_CONNECTION_RESET (Соединение сброшено) говорит о некорректных настройках веб-браузера, или у тебя в сети неполадки.
Сомневаюсь, что твой провайдер взял и заблокировал Plunker.
...
Рейтинг: 0 / 0
18.07.2019, 22:37
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Шаблон
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39838293&tid=1443722]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 62ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 1ms
others: 236ms
total:  394ms
созд. / загр.: 394ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]