Как изменить стиль динамического переключателя при нажатии - PullRequest
Новая
       10

Как изменить стиль динамического переключателя при нажатии

0 голосов
/ 30 августа 2018

В настоящее время я создаю динамическую форму даты получения с помощью переключателей. Я хочу изменить стиль текущего выбранного значения, когда пользователь щелкнет по нему. Вот мой неудачный код: 

foreach ($period as $day){
echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'<br/></label>';
}

Css 

.pickup-date-tab label.checked{
background: #6d1f89 !important;
color: #fff; }

JQuery 

$('#pickupdate').on('click',function(){
        $('#pickupdate').removeClass('checked');
        $(this).addClass('checked');
    });

Моя проблема в том, что она работает только на первой кнопке.

1 Ответ

0 голосов
/ 31 августа 2018

Я понял это, благодаря этому сайту. Я нашел связанную проблему.

Я обновил код до 

foreach ($period as $day)
                {
                    echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date"><div class="highlited">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'</div></label>';

                }

Правильный jquery для onclick 

$(document).on('click','#deliverydate',function(){
    $('#pickupdate').removeClass('checked'); // i have removed this line instead I used CSS
    $(this).addClass('checked'); // i have removed this line instead I used CSS    });

Css 

.pickup-date input[type=radio]:checked + .highlited{
    background: #6d1f89 !important;
    color: #fff;
}
...