0

Подскажите пожалуйста как сделать что-бы инпут взаимодействовал со звездами, то-есть если в инпут написали 4 то и окрашенных звезд 4. Сейчас звезды меняются если в value через html задать цифру. Спасибо

$(document).ready(function () {
    $('.rating__body.edit .rating__star').hover(function () {
        var block = $(this).parents('.rating');
        block.find('.rating__activeline').css({ width: '0%' });
        var ind = $(this).index() + 1;
        var linew = ind / block.find('.rating__star').length * 100;
        setrating(block, linew);
    }, function () {
        var block = $(this).parents('.rating__body');
        block.find('.rating__star').removeClass('active');
        var ind = block.find('input').val();
        var linew = ind / block.find('.rating__star').length * 100;
        setrating(block, linew);
    });
    $('.rating__body.edit .rating__star').click(function (event) {
        var block = $(this).parents('.rating__body');
        var re = $(this).index() + 1;
        block.find('input').val(re);
        var linew = re / block.find('.rating__star').length * 100;
        setrating(block, linew);
    });
    $.each($('.rating__body'), function (index, val) {
        var ind = $(this).find('input').val();
        var linew = ind / $(this).parent().find('.rating__star').length * 100;
        setrating($(this), linew);
    });
    function setrating(th, val) {
        th.find('.rating__activeline').css({ width: val + '%' });
    }
});
.rating {
    display: flex;
    flex-wrap: wrap;
}

.rating__body{
        display: inline-block;
        position: relative;
        width: 101px;
    }

.rating__line{
        position: absolute;
        width: 101px;
        height: 16px;
        top: 0;
        left: 0;
        background: url("https://i.ibb.co/RYvRDph/bg-rating.png") 0 0 no-repeat;
        z-index: 1;
        background-size: 100% 100%;
    }

.rating__activeline {
        position: absolute;
        width: 0px;
        height: 16px;
        top: 0;
        left: 0;
        background: url("https://i.ibb.co/QbhcQwD/bg-rating-active.png") 0 0 no-repeat;
        z-index: 2;
background-size: 100% 100%;

    }

.rating__star{
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        z-index: 3;
    }

.rating__value{
        font-weight: 600;
        font-size: 18px;
    }
<div class="rating">
  <div class="rating__body">
    <div class="rating__line"></div>
    <div class="rating__activeline"></div>
    <div class="rating__stars">
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
    </div>
    <input data-required value="5.0" autocomplete="off" type="text" name="rating" class="input">
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

1 ответ 1

2

При инициализации добавляем полю ввода обработчик, в который помещаем действия отвечающие за выставление рейтинга на основе текущего значения.

$(document).ready(function () {
    $('.rating__body.edit .rating__star').hover(function () {
        let block = $(this).parents('.rating');
        block.find('.rating__activeline').css({ width: '0%' });
        let ind = $(this).index() + 1;
        let linew = ind / block.find('.rating__star').length * 100;
        setrating(block, linew);
    }, function () {
        let block = $(this).parents('.rating__body');
        block.find('.rating__star').removeClass('active');
        let ind = block.find('input').val();
        let linew = ind / block.find('.rating__star').length * 100;
        setrating(block, linew);
    });
    $('.rating__body.edit .rating__star').click(function (event) {
        let block = $(this).parents('.rating__body');
        let re = $(this).index() + 1;
        block.find('input').val(re);
        let linew = re / block.find('.rating__star').length * 100;
        setrating(block, linew);
    });
    $.each($('.rating__body'), function (index, val) {
        let input = $(this).find('input');
        $(input).on('input', () => { // Добавляем обработчик для input
            let ind = $(input).val();
            let linew = ind / $(this).parent().find('.rating__star').length * 100;
            setrating($(this), linew);
        }).trigger('input'); // Принудительно запускаем обработчик
    });
    function setrating(th, val) {
        th.find('.rating__activeline').css({ width: val + '%' });
    }
});
.rating {
    display: flex;
    flex-wrap: wrap;
}

.rating__body {
        display: inline-block;
        position: relative;
        width: 101px;
        user-select: none;
    }

.rating__line {
        position: absolute;
        width: 101px;
        height: 16px;
        top: 0;
        left: 0;
        background: 0 0 / auto 16px url('https://i.ibb.co/RYvRDph/bg-rating.png') no-repeat;
        z-index: 1;
    }

.rating__activeline {
        position: absolute;
        width: 0px;
        height: 16px;
        top: 0;
        left: 0;
        background: 0 0 / auto 16px url('https://i.ibb.co/QbhcQwD/bg-rating-active.png') no-repeat;
        z-index: 2;
    }

.rating__star {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        z-index: 3;
    }

.rating__value {
        font-weight: 600;
        font-size: 18px;
    }

.rating__input {
        width: 100%;
    }
<div class="rating">
  <div class="rating__body edit">
    <div class="rating__line"></div>
    <div class="rating__activeline"></div>
    <div class="rating__stars">
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
    </div>
    <input data-required value="3" autocomplete="off" type="number" min="1" max="5" name="rating" class="rating__input">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.