Как установить точку на диапазон div?
У меня есть один диапазон div в моем проекте MVC asp.net, где крайняя левая и правая точки содержат максимальное и минимальное значения соответственно, например (max=400 и min=0). Я хочу установить точку в div с заданным диапазоном.
Например: когда я устанавливаю 399 в качестве значения точки, мой div выглядит следующим образом.
Как установить точку на диапазон div?
Примечание. Мне не нужен слайдер HTML, моя точка фиксирована и не требует изменения пользовательского интерфейса. Значение должно быть написано под точкой.
Ответы 1
Что-то вроде этого
$('.scoreContainer').find('.score').each(function() {
var high = $(this).attr('data-high'),
low = $(this).attr('data-low'),
score = $(this).attr('data-score');
var position = ((score - low) / (high - low)) * 100
$(this).find('.arrow').css('right', position + "%");
$(this).find('.arrow').html('<span>' + score + '</span>');
}); .scoreContainer {
background: #ff3232;
background: -moz-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
background: -webkit-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
background: linear-gradient(to right, #ff3232 0%, #ffff30 50%, #95ef81 100%);
width: 400px;
height: 20px;
position: relative;
margin-bottom: 25px;
display: flex;
}
.score{
width: 33.33%;
height: 100%;
position: relative;
}
.arrow {
position: absolute;
right: calc(100% - 5px);
top: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow span {
font-size: 10px;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
} <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "scoreContainer">
<div class = "green score" data-high = "600" data-low = "400" data-score = "475">
<div class = "arrow"></div>
</div>
<div class = "yelow score" data-high = "399" data-low = "200" data-score = "201">
<div class = "arrow"></div>
</div>
<div class = "red score" data-high = "199" data-low = "0" data-score = "99">
<div class = "arrow"></div>
</div>
</div>Итак, вам нужно иметь стрелку для каждого цвета, всего три?
ага, есть общее, исходя из общего нужно установить стрелку на каждый цвет.
Я внес некоторые изменения, так что теперь есть три стрелки. Но помните, что SO предназначен для получения помощи с вашим кодом, а не для меня. В следующий раз вам нужно приложить усилия, чтобы попытаться сделать это самому, а не просто заставить меня сделать это, даже если это будет проще. А также будет перекрытие цифр и стрелок, если два счета близки, например, 199 и 200. Так что вам все равно нужно настроить его, чтобы он подходил вам лучше всего.
Синтаксис работает отлично, нужно немного улучшить, как вы видите в описании вопроса есть три цветные полосы, их диапазон 100-199: Низкий, 200-299: Средний, 300-399: Высокий, в зависимости от диапазона, как зафиксировать стрелку на эти цветные полосы?