- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在加载时选中所有复选框,但这并不能正常工作
通常您会添加这段代码,但没有任何效果加载: { filter: '.square,.circle,.triangle' },
请参阅codepen http://codepen.io/anon/pen/GZxwzq
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
var checkboxFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('#Filters');
self.$reset = $('#Reset');
self.$container = $('#Container');
self.$filters.find('fieldset').each(function(){
self.groups.push({
$inputs: $(this).find('input'),
active: [],
tracker: false
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a form value changes.
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
var self = this;
// loop through each filter group and add active filters to arrays
for(var i = 0, group; group = self.groups[i]; i++){
group.active = []; // reset arrays
group.$inputs.each(function(){
$(this).is(':checked') && group.active.push(this.value);
});
group.active.length && (group.tracker = 0);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this,
cache = '',
crawled = false,
checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
for(var i = 0, group; group = self.groups[i]; i++){
group.active[group.tracker] && (cache += group.active[group.tracker]);
if(i === self.groups.length - 1){
self.outputArray.push(cache);
cache = '';
updateTrackers();
}
}
},
updateTrackers = function(){
for(var i = self.groups.length - 1; i > -1; i--){
var group = self.groups[i];
if(group.active[group.tracker + 1]){
group.tracker++;
break;
} else if(i > 0){
group.tracker && (group.tracker = 0);
} else {
crawled = true;
}
}
};
self.outputArray = []; // reset output array
do{
crawl();
}
while(!crawled && checkTrackers());
self.outputString = self.outputArray.join();
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
//console.log(self.outputString);
// ^ we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
$(function(){
// Initialize checkboxFilter code
checkboxFilter.init();
// Instantiate MixItUp
$('#Container').mixItUp({
load: {
filter: '.square,.circle,.triangle'
},
controls: {
enable: false, // we won't be needing these
toggleFilterButtons: true
},
animation: {
easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
duration: 600
}
});
});
body{
background: #68b8c4;
}
body, button{
font-family: 'Helvetica Neue', arial, sans-serif;
color: #333333;
-webkit-font-smoothing: antialiased;
}
/**
* Form & Checkbox Styles
*/
.controls{
background: #333;
padding: 2%;
}
fieldset{
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
padding: .5em;
border-radius: 3px;
}
/*.checkbox{
display: block;
position: relative;
cursor: pointer;
margin-bottom: 8px;
border: 3px soldi green;
}
.checkbox input[type="checkbox"]{
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.checkbox label{
display: inline-block;
vertical-align: top;
text-align: left;
padding-left: 1.5em;
}
.checkbox label:before,
.checkbox label:after{
content: '';
display: block;
position: absolute;
}
.checkbox label:before{
left: 0;
top: 0;
width: 18px;
height: 18px;
margin-right: 10px;
background: #ddd;
border-radius: 3px;
}
.checkbox label:after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 2px;
background: #68b8c4;
opacity: 0;
pointer-events: none;
}
.checkbox input:checked ~ label:after{
opacity: 1;
}
.checkbox input:focus ~ label:before{
background: #eee;
}
*/
/**
* Container/Target Styles
*/
.container{
padding: 2%;
min-height: 400px;
text-align: justify;
position: relative;
}
.container .mix,
.container .gap{
width: 100px;
display: inline-block;
margin: 0 5%;
}
.container .mix{
width: 100px;
height: 100px;
margin: 5%;
background: white;
display: none;
}
.container .mix.green{
background: #a6e6a7;
}
.container .mix.blue{
background: #6bd2e8;
}
.container .mix.circle{
border-radius: 999px;
}
.container .mix.triangle{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #68b8c4;
border-left-color: #68b8c4;
}
.container .mix.sm{
width: 50px;
height: 50px;
}
/**
* Fail message styles
*/
.container .fail-message{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
opacity: 0;
pointer-events: none;
-webkit-transition: 150ms;
-moz-transition: 150ms;
transition: 150ms;
}
.container .fail-message:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.container .fail-message span{
display: inline-block;
vertical-align: middle;
font-size: 20px;
font-weight: 700;
}
.container.fail .fail-message{
opacity: 1;
pointer-events: auto;
}
#ck-button {
margin:4px;
background-color:#ffffff;
border-radius:25px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button:hover {
background:red;
}
#ck-button label {
float:left;
/* width:4.0em;*/
padding:10px 15px;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#333;
}
<div class="controls" id="Filters">
<!-- We can add an unlimited number of "filter groups" using the following format: -->
<fieldset>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".square"/>
<span>Local Events</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".circle"/>
<span>Beaches</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".triangle"/>
<span>Attractions</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".triangle"/>
<span>Places of Interests</span>
</label>
</div>
</fieldset>
<fieldset>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".white"/>
<span>January</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>February</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>March</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>April</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>May</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>June</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>July</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>August</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>September</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>October</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>November</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>December</span>
</label>
</div>
</fieldset>
</div>
<div id="Container" class="container">
<div class="fail-message"><span>No places were found</span></div>
<div class="mix triangle white lrg"></div>
<div class="mix square white sm"></div>
<div class="mix circle green lrg"></div>
<div class="mix triangle blue lrg"></div>
<div class="mix square white lrg"></div>
<div class="mix circle blue sm"></div>
<div class="mix triangle green lrg"></div>
<div class="mix square blue lrg"></div>
<div class="mix circle white lrg"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
任何帮助将不胜感激
非常感谢丹
最佳答案
一般来说,您不能在加载时分配属性吗?例如,如果我想勾选我可以做的所有方框:
$('.checkbox').prop('checked',true)
并且任何属于复选框类的内容都将更新为选中状态。在您的函数中,您可能会执行一个在加载时执行此回调的回调。
也可能是当您的 javascript 执行时这些元素没有填充到页面上,因此它假定这些元素不存在,因此对它们不做任何事情。
-K
关于jquery - Mixitup 插件多能复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36633433/
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我正在寻找有关如何构建可扩展 WCF 服务器(具有动态加载的服务)的建议,最好使用 System.Addins 或 MEF。 服务器应托管实现最小“插件”API(StartService/StopSe
有没有一种方法可以使用加载浏览器扩展/插件/插件的 headless 浏览器(即 PhantomJS、Selenium)来运行自动测试? 更具体地说,我想模拟广告拦截器(如 Ghostery、ad-b
我是 gradle 的新手,我使用 artifactory 作为我的 repo 服务器。我在网上查看了如何将我的项目发布到我的 repo 服务器,发现我可以使用 maven-publish 或使用 a
我想禁用某些状态的点击/事件,并仅使少数状态可点击。我通读了http://newsignature.github.io/us-map/处的文档,并且找不到与此问题相关的任何内容。 最佳答案 http:
据我了解,在Intellij中使用idea插件打开Maven构建的项目并不是最好的方法,即调用: mvn idea:idea 但是直接打开pom文件(Intellij有默认的Maven插件);同样的事
使用Artifactory plugin对于 Jenkins pipeline 来说是一种幸福,只要遵循文档就可以了。但后来我介绍了Maven Flatten plugin解析父模块和子模块 mvn
我已经安装了Elasticsearch版本1.7.1。一切正常。我也安装了 JDBC 驱动程序。检查下面我的插件文件夹 目录E:\Xampp\htdocs\my-elastic\elasticsear
在我使用 webpack common chunks 插件创建包含第三方库(如 angular、react、lodash 等)的 vendor 包之前,但后来我知道了 webpack dll
我们正在尝试使用(Jenkins、sonar、eclipse ...)安装 CI 平台。 为了让每个开发人员都可以在提交之前对他的代码进行分析,我想知道两种选择: 使用 Sonar 插件运行本地分析。
我知道这是一个比较特殊的问题。尽管如此,也许有些人知道这一点: 我想在 Eclipse 中使用 Maven 编译 Hector=> 分支:0.7.0 和标签:hector-0.7.0-29(https
我卡住了。我一直在尝试寻找或自己创建一个简单的准系统示例,说明如何为 VS 2010 Express 创建 Outlook 插件。我知道这在 VS 2010 Pro 中更简单,但是,在快速版本中真的不
我有以下排除过滤器来忽略所有 R 文件类: findbugs-exclude-filter.xml 当我将它用于 FindBugs-IDEA 插件时,它可以
我刚开始玩 CakePHP,我发现了 Wildflower CMS .我喜欢这个想法,并打算开始修补它。不过,我有一个问题。 在自述文件中,我发现了以下内容:“Wildflower 不是也不会是 Ca
虽然现在大部分情况都是使用n-api来编写插件,但是底层毕竟是v8(和libuv),使用v8编写简单的插件,同时熟悉v8的使用。 本文介绍在写c++插件时,简单又常用的写法,其实本质上,写插件
本篇是 Python 系列教程第 3 篇,更多内容敬请访问我的 Python 合集 Visual Studio Code的安装非常简单,就不放这里增加文章篇幅了。 相比PyCharm,V
Maven – 插件 什么是 Maven 插件? Maven 实际上是一个依赖插件执行的框架,每个任务实际上是由插件完成。Maven 插件通常被用来: 创建 jar 文件 创建 war
我正在编写一个插件来添加带有标签 [deposit_page] 的页面;该标记应替换为一些 PHP 代码。 这就是我所拥有的,但它不起作用。有什么我遗漏或做错了什么吗? function deposi
我是一名优秀的程序员,十分优秀!