Я работаю над сценарием, который я основываюсь на примере. В примере они использовали:Получение скрипта для работы без .text
$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
, чтобы получить цену, чтобы показать в зеленый слайдер. Я хочу добавить цену в budgetAmount, которую я выполнил и разместил текст «БЮДЖЕТ» в цене. Однако при этом скользящая панель больше не скользит к выбранной точке.
Чтобы увидеть оригинальный эффект закомментируйте код:
//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
//$("#sliderInterval").text("BUDGET")
//$("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
В принципе, я не могу понять, что нужно изменить следующий код для того, чтобы позволить зеленой полосе скользить в выбранной точке.
$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
Кроме того, вы заметите, что вы должны нажать непосредственно на точку, чтобы получить это, чтобы скользить. Есть ли способ, которым я могу заставить окрестность сделать кликабельным?
$(function() {
var ranges = [{
lower: 500,
upper: 1000
}, {
lower: 1100,
upper: 2000
}, {
lower: 2100,
upper: 5000
}, {
lower: 5100,
upper: 10000
}, {
lower: 11000,
upper: 20000
}, {
lower: 21000,
upper: 50000
}, ];
var wslider = $("#sliderBar").width()/(ranges.length);
for (var i = 0; i < ranges.length; i++) {
var range = $('<div class="intervalCircle">');
var left = (100/(ranges.length) * (i + 0.5));
left = "calc(" + left + "% - 8px)";
range.css("left", left);
range.on("click", function(idx) {
return function() {
var sliderleft = wslider * idx;
\t \t //$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
\t \t //*** HERE *** $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
\t \t $("#sliderInterval").text("BUDGET")
\t \t $("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
.animate({
left: sliderleft - 2
});
};
}(i));
$("#sliderBar").append(range);
$("#sliderInterval").css("width", wslider + "px");
}
});#sliderBar {
border-radius: 15px;
width: 90%;
height: 30px;
margin: 30px 10%;
background: #454343;
position: relative;
overflow: hidden;
}
.intervalCircle {
border-radius: 50%;
height: 10px;
width: 10px;
background: red;
z-index: 1;
position: absolute;
margin-top: 10px;
cursor: pointer;
}
.intervalCircle:hover {
}
.rangeSection.active{
background-color: green;
z-index: 3;
}
.sliderInterval:first-child {
padding-left: 0%;
}
.intervalCircle:first-child {
padding-left: 0;
}
#sliderInterval {
height: 100%;
border-radius: 15px;
position: absolute;
text-align: center;
z-index: 999;
color: #FFF;
background-color: green;
}
#budgetAmount {
\t font-size: 1.5em;
\t color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
\t <div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>
Спасибо! Я не знал, что это так просто. Знаете ли вы, есть ли что-нибудь, что я могу сделать, чтобы облако вокруг точек было доступно для кликов? – Becky
Я боюсь, что на данный момент нет способа: кликабельная область - это div с классом .intervalCircle, который является самой маленькой кружкой и автоматически генерируется JQuery, если я правильно понял. Единственное возможное обходное решение, которое я вижу, - это попытаться изменить скрипт, чтобы окружить div тегом, а затем применить функцию jquery с щелчком мыши к тегам – silviagreen
. Я это выясню. Один крошечный вопрос, который я не могу понять. Я пытаюсь добавить запятые в свои диапазоны, чтобы значения печатались как 1000 долларов вместо 1000 долларов. Я пробовал делать это «upper: 1 +», «+ 000», и он отображается в прямом эфире следующим образом: $ 1,0 .... Любые идеи? – Becky