使用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（）;函数，并在所有.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缺少'.sliderInterval'中的'r'。