Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как правильно передать данные по data-target? (https://javascript.ru/forum/misc/84369-kak-pravilno-peredat-dannye-po-data-target.html)

Alexprom 20.08.2022 16:04

Как правильно передать данные по data-target?
 
Здравствуйте!
Хочу передать данные в кнопку по data-target
и все работает, но если кнопки имеют одинаковый ID то данные передадуться только в одну кнопку. А как передавать независимо от дублей, не понимаю и не пойму))

Подскажите пожалуйста, как решить...

$(options).each(function() {
                  //console.log($(this).parents('.form-group').find('label'));

                  str_opts += $(this).parents('.form-group').find('label').eq(0).text().trim();
                  str_opts += ": ";
                  str_opts += $(this).parent('label').text().trim();
                  str_opts += "<br/>";
                 // console.log(str_opts);

                  var pre = $(this).data('prefix');
                  var price = parseFloat($(this).data('price'));
                  if (pre.length != 0 && isNaN(price) == false) {
                      switch (pre) {
                          case '-':
                              total -= price;
                              break;
                          case '+':
                              total += price;
                              break;
                          case '=':
                              total = price;
                              break;
                          case '*':
                              total *= price;
                              break;
                          case '/':
                              total /= price;
                              break;
                          case 'u':
                              total = total + (($total * price) / 100);
                              break;
                          case 'd':
                              total = total - ((total * price) / 100);
                              break;
                          default:
                              break;
                      }
                  }
              });
              $("button[data-target='#" + btn_id + "'").html(str_opts);
              console.log(str_opts);

рони 20.08.2022 16:37

Alexprom,
для однотипных элементов используют class, а не id. и тогда достаточно указать индекс нужного элемента, без всяких data-target

Alexprom 20.08.2022 16:54

Цитата:

Сообщение от рони (Сообщение 547486)
Alexprom,
для однотипных элементов используют class, а не id. и тогда достаточно указать индекс нужного элемента, без всяких data-target

Вот так?
$("div[class='" + btn_id + "'").html(str_opts);

Если да, то так не работает(

рони 20.08.2022 17:14

Alexprom,
$("div.class").eq(btn_index).html(str_opts);

Alexprom 20.08.2022 17:28

Цитата:

Сообщение от рони (Сообщение 547488)
Alexprom,
$("div.class").eq(btn_index).html(str_opts);

Я явно делаю что-то не так...
<div class="btn_index-{{ modal_id }}"></div>


$("div.class").eq(" + btn_index + ").html(str_opts);


Все равно не работает..

рони 20.08.2022 17:56

Цитата:

Сообщение от Alexprom
Все равно не работает..

где код?

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .red {
            background-color: #FF0000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            const btn = $('div.btn'),
                test = $('button.test');
            test.on('click', function() {
                const index = test.index(this);
                btn.eq(index).toggleClass('red');
            })
        });
    </script>
</head>

<body>
    <button class="test">01 click me</button>
    <button class="test">02 click me</button>
    <button class="test">03 click me</button>
    <button class="test">04 click me</button>
    <button class="test">05 click me</button>
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn">4</div>
    <div class="btn">5</div>
</body>

</html>

Alexprom 20.08.2022 18:15

Цитата:

Сообщение от рони (Сообщение 547490)
где код?

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .red {
            background-color: #FF0000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            const btn = $('div.btn'),
                test = $('button.test');
            test.on('click', function() {
                const index = test.index(this);
                btn.eq(index).toggleClass('red');
            })
        });
    </script>
</head>

<body>
    <button class="test">01 click me</button>
    <button class="test">02 click me</button>
    <button class="test">03 click me</button>
    <button class="test">04 click me</button>
    <button class="test">05 click me</button>
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn">4</div>
    <div class="btn">5</div>
</body>

</html>

Вот этот код? файл.js
или какой? Я скину все что нужно

рони 20.08.2022 18:29

Alexprom,
не могу помочь, проблема слабо локализована, всё что мог, код выше.

Alexprom 20.08.2022 23:15

Цитата:

Сообщение от рони (Сообщение 547492)
Alexprom,
не могу помочь, проблема слабо локализована, всё что мог, код выше.

слабо локализована, в смысле слабо описана? Я могу сформулировать по лучше, просто иногда когда сахар в крови за 10 могу выдавать белиберду))
На ваш код выше я смотрел, немного разобрался, но как прикрутить тот ID что идет в data-target тупо не знаю. У меня получилось только присвоить класс если выбраны нужные опции через метод change и все.

Вместо присвоения класс, я поставил .html(str_opts) и все получилось но не совсем)) каждому диву btn я присвоил одинаковые параметры. А они должны исходить с + btn_id +
{% if (options) %} 
<div class="dm-com-vd-button-1"><button type="button" class="btn btn-primary open-options" data-toggle="modal" data-target="#sets-popup-{{ modal_id }}">{{ text_sets_options }}</button></div>
{% endif %}

И тут я засыпался...

рони 21.08.2022 08:05

Alexprom,
в вашем коде я не разобрался, но двух одинаковых id на одной странице не должно быть.
это всё, что на данный момент, я могу вам сказать.


Часовой пояс GMT +3, время: 14:43.