Javascript 使用棘轮时是否有方法选择每个切换?
我正在从数据库动态加载一个类列表,如果这些类已经完成,用户应该选择这些类。我正在使用Ratchet的toggle来选择类,并尝试使用JavaScript函数来查找哪些切换已经被切换-到目前为止,没有运气。我不是很精通JavaScript,所以如果这看起来很琐碎,我很抱歉。我一直在尝试使用的函数、类在网页中的显示方式以及处理切换的CSS内容如下所示:Javascript 使用棘轮时是否有方法选择每个切换?,javascript,jquery,html,css,ratchet-2,Javascript,Jquery,Html,Css,Ratchet 2,我正在从数据库动态加载一个类列表,如果这些类已经完成,用户应该选择这些类。我正在使用Ratchet的toggle来选择类,并尝试使用JavaScript函数来查找哪些切换已经被切换-到目前为止,没有运气。我不是很精通JavaScript,所以如果这看起来很琐碎,我很抱歉。我一直在尝试使用的函数、类在网页中的显示方式以及处理切换的CSS内容如下所示: <script type="text/javascript"> function checkClasses() {
<script type="text/javascript">
function checkClasses() {
var classes = new Array();
classes.push("COSC120");
alert(classes[0]);
$("input:checkbox[name=type]:checked").each(function()
{
classes.push($(this).val());
});
}
</script>
我不知道是否需要更多的帮助,但如果需要,请询问!提前谢谢你 Ratchet会将active添加到元素的类列表中,所以$'.toggle.active'会为您提供一组活动切换开关谢谢!$'.toggle.active'是我需要的键。通过这个函数,我发现var selected=document.querySelectorAll'.toggle.active';成功了。
echo '<div class="toggle" id="' .$row['class_id']. '" name="type">';
echo '<div class="toggle-handle"></div>';
echo '</div>';
.toggle {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border;
}
.toggle .toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #999;
text-transform: uppercase;
content: "no";
}
.toggle.active {
background-color: #ff7e00;
border: 2px solid #ff7e00;
}
.toggle.active .toggle-handle {
border-color: #ff7e00;
-webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0);
}
.toggle.active:before {
right: auto;
left: 15px;
color: #fff;
content: "yes";
}
.toggle input[type="checkbox"] {
display: none;
}