使用addClass显示间隔

Question

我试图在条形图中显示间隔。最初我使用jQuery插件作为范围，但它没有像我想要的那样工作。

我的酒吧里面有几个不同的项目符号。每当有人在该点内部或附近点击（在类sliderInterval中）时，我希望将类rangeSection添加到该区域，基本上显示某个时间间隔处于活动状态。但是，rangeSection甚至没有出现，我也不确定我是否正确这样做。

另外，因为我这样做是间隔的。我希望能够给出这些间隔值，以便在选择一个时，我可以显示该值。

这就是我想让它看起来像：

我添加了一个片段来展示我到目前为止所做的工作。有什么建议吗？

$(function interval() {
  $(".slideInterval").click(function() {
    $(this).addClass(".rangeSection");
  });
});

#sliderBar {
  border-radius: 15px;
  width: 90%;
  height: auto;
  margin: 25px 10%;
  background: blue;
}
.rangeSection {
  width: 100px;
  height: 100%;
  color: purple;
  position: absolute;
  z-index: 1;
}
.intervalCircle {
  border-radius: 50%;
  height: 15px;
  width: 15px;
  background: red;
  z-index: 1;
  position: absolute;
}
.sliderInterval {
  display: inline-block;
  padding: 10px 8%;
}
.sliderInterval:first-child {
  padding-left: 0;
}
.intervalCircle:first-child {
  padding-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
<div class="rangeSection"></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
  <div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
</div>

Answer 1

尝试这个。

您可以使用.ready（）; jQuery库的功能，并在所有.sliderInterval元素上设置.click（）侦听器。我也添加了活动类。

在这里试试： https://jsfiddle.net/8cxLLts1/

$(document).ready(function(){
    $(".sliderInterval").click(function() {
       $(this).addClass("active");
    });
});

编辑：实际上，如果您使用toggleClass（）而不是addClass（），您将能够打开和关闭特定部分

Answer 2

在html属性中使用onclick然后在js中绑定click事件可能被认为是多余的和不必要的。尝试从html中删除onclick属性，然后像这样调整你的js：

$(document).ready(function(){
})
.on('click', '.sliderInterval', function(){
    $(this).addClass(".rangeSection");
});

将它绑定到文档本身，这将有助于您的事件委派自然。另外，请注意仔细检查您的班级名称 - 您的js缺少“＆＃39; r＆＃39;在＆＃39; .sliderInterval＆＃39;。