Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Шаблон / 23 сообщений из 23, страница 1 из 1
15.07.2019, 14:00
    #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, 15:15
    #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:47
    #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, 21:12
    #39837622
OldMaster
OldMaster
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
авторИли так...
Вообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
Код: javascript
1.
$(this).parents('.template').find('.myVal').text('1');


Но если разметка блоков .template меняться не будет, то можно и так.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.07.2019, 22:07
    #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
| Ответить | Цитировать | Написать  
16.07.2019, 07:29
    #39837690
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
OldMasterВообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
Вообще, в идеале нужно просто делать конкретную задачу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2019, 11:24
    #39837788
Дмитрий Мух
Дмитрий Мух
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
OldMasterВообще, в идеале лучше сделать через parents() и find(), чтобы не привязываться к конкретному расположению элементов внутри блока.
А можно ещё через дата-атрибуты, "чтобы не привязываться к конкретному расположению элементов внутри блока" :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2019, 11:33
    #39837790
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
Дмитрий МухА можно ещё через дата-атрибуты,в данном случае чем отличаются дата-атрибуты от класса?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2019, 11:47
    #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, 17:17
    #39837980
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
Дмитрий МухПример генерируемой разметки:
torsшаблон будет добавляться на страницу
это несколько разные понятия
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2019, 19:27
    #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, 20:42
    #39838062
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
skyANA,

проблема в том , что у тебя все элементы разные. отличие есть в атрибутах. при таком варианте проблем нет. у ТС не так. (по крайней мере в приведенной постановке здесь задачи)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2019, 20:59
    #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, 21:08
    #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
| Ответить | Цитировать | Написать  
17.07.2019, 12:14
    #39838257
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шаблон
вадя,

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

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

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

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

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

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

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

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


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