Question

我正在编写一个基于示例的脚本。在他们使用的示例中：

$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

让价格显示在绿色滑块内。我想将价格加到budgetAmount，我已经完成并将价格文本“BUDGET”放在价格位置。但是，在执行此操作时，滑动条不会再滑动到所选的点。

要查看原始效果，请注释掉这样的代码：

//$("#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;
		//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		//*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		$("#sliderInterval").text("BUDGET")
		$("#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 {
	font-size: 1.5em;
	color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
	<div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>

Answer 1

您必须使用“预算”移动该行，以便可以调用animate函数

$("#sliderInterval").text("BUDGET").animate({
            left: sliderleft - 2
          });

通过这种方式，它可以移动。

使预算看起来像$ 1,000- $ 2,000

$("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));

来源：answer

$(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;
		//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		//*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		
		$("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
          $("#sliderInterval").text("BUDGET").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 {
	font-size: 1.5em;
	color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
	<div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>

让脚本在没有.text的情况下工作

1 个答案: