Блог

У меня каждая кнопка отличается ID , и я хочу взять текст атрибута данных каждой кнопки title и добавить новый пользовательский атрибут данных prefix .

Мой список бронирования в формате html, где есть кнопки, и я должен добавить data-prefix значение для каждой кнопки:

 <div class="booked-appt-list shown" style="display: block;">
    <div class="timeslot bookedClearFix timeslot-count-hidden has-title ">
        <span class="timeslot-time">
            <span class="timeslot-title">Exclusive studio - #KO</span>
            <span class="timeslot-range"><i class="booked-icon booked-icon-clock"></i>amp;nbsp;amp;nbsp;14:45 – 16:45</span>
        </span>
        <span class="timeslot-people">
            <button id="ddPrefixBtn_12" data-prefix="" data-calendar-id="0" data-title="Exclusive studio" data-timeslot="1445-1645" data-date="2021-09-20" class="new-appt button">
                <span class="timeslot-mobile-title">Exclusive studio - #KO</span>
                <span class="button-timeslot">14:45 – 16:45</span><span class="button-text">Book Appointment</span>
            </button>
        </span>
    </div>

    <div class="timeslot bookedClearFix timeslot-count-hidden has-title ">
        <span class="timeslot-time">
            <span class="timeslot-title">Prime studio - #SP</span>
            <span class="timeslot-range"><i class="booked-icon booked-icon-clock"></i>amp;nbsp;amp;nbsp;17:15 – 19:15</span>
        </span>
        <span class="timeslot-people">
            <button id="ddPrefixBtn_13" data-prefix="" data-calendar-id="0" data-title="Prime studio" data-timeslot="1715-1915" data-date="2021-09-20" class="new-appt button">
                <span class="timeslot-mobile-title">Prime studio - #SP</span>
                <span class="button-timeslot">17:15 – 19:15</span>
                <span class="button-text">Book Appointment</span>
            </button>
        </span>
    </div>
</div>
 

У меня есть опция выбора, которая будет показывать только выбранные заказы. Выберите опцию уже data-prefix :

 <div class="booked-serviceSwitcher calendar">
    <p>
        <i class="booked-icon booked-icon-calendar"></i>
        <select class="booked_calendar_chooser" id="change_service_booked">
            <option class="level-0" data-prefix="SP">Party</option>
            <option class="level-0" data-prefix="KO">School</option>
        </select>
    </p>
</div>
 

Что я пробовал:

 let t = $('[id*=ddPrefixBtn_]').data('title');
let n = $('#change_service_booked').find(':selected').attr('data-prefix');
$('[id*=ddPrefixBtn_]').data('prefix', t ' - #' n);
console.log("1:" n);
console.log("2:" t);
console.log("3:" $('[id*=ddPrefixBtn_]').data('prefix'));

let selected = $('#change_service_booked').find(':selected').data('prefix');
$('.dataIdTarget').hide();
$('*[data-idTarget="' selected '"]').show();
$('*[data-preTarget="' selected '"]').show();
 

На данный момент он добавляет все кнопки одинаково data-prefix

Там нет перегрузки .data() , чтобы применить функцию к каждому элементу отдельно (как, например .text((i,txt) => , для — так что вам нужно пройти через каждую кнопку и добавить свой префикс соответственно:

 $('[id*=ddPrefixBtn_]').each(function(i, e) {
  let t = $(this).data('title');
  let n = $('#change_service_booked').find(':selected').data('prefix');
  $(this).data('prefix', t ' - #' n);
  console.log("1:" n);
  console.log("2:" t);
  console.log("3:" $(this).data('prefix'));
});
 

С незначительным повышением эффективности:

 let n = $('#change_service_booked').find(':selected').data('prefix');
console.log("1:" n);
$('[id*=ddPrefixBtn_]').each(function(i, e) {
  let t = $(this).data('title');
  $(this).data('prefix', t ' - #' n);
  console.log("2:" t);
  console.log("3:" $(this).data('prefix'));
});