- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
所以我目前正在学习 jquery 和一些用于动画的 tweenlite(我想保持基础)。所以我目前正在构建一个投资组合网格,但我想添加一个元素的点击,另一个元素正在淡入(从右边滑动没关系)。
但是我无法找到一种方法来使 1 个元素有 1 个要显示的框而另一个元素有一个不同的框要显示而无需一遍又一遍地处理代码并且每次都更改一个简单的数字,必须有一种无需一遍又一遍地重复代码即可使其工作的方法。
我创建了一个代码笔来展示我的挣扎所在。
我希望我对这个问题的描述很清楚:)
HTML
<div class="box">
<div class="show">Show 1</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 1</div>
</div>
</div>
<div class="box">
<div class="show">Show 2</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 2</div>
</div>
</div>
</div>
CSS
.container {
overflow: auto;
margin: 0 auto;
width:500px;
}
.box {
height:200px;
width:200px;
background:yellow;
text-align:center;
cursor:pointer;
margin:0 auto;
float:left;
margin-right:50px;
}
.bigbox {
height:100%;
width:100%;
background-color: grey;
z-index:100;
left:0;
opacity: 0;
position: fixed;
display:none;
top:0;
.removeit {
height:100px;
width: 100px;
top: 0;
right:0;
background-color: blue;
margin:0 auto;
cursor:pointer;
}
}
.show {
display:block;
}
.noscroll {
overflow:hidden;
}
Javascript
$(".box").click(function(){
$(".bigbox").addClass("show");
TweenLite.to($('.bigbox'), 0.5, {
opacity:1,
autoAlpha:1
});
});
$(".removeit").click(function(){
TweenLite.to($('.bigbox'), 0.5, {
autoAlpha:0,
opacity:0
});
});
代码笔
最佳答案
正如我在评论中提到的,如果我们不修改 HTML,我认为可以找到 box 和 bigbox 之间的共同点。这个共同点应该是它们各自类别的 index 值。
var clickedIndex=$('.box').index($(this));
.var
bigbox=$(".bigbox").eq(clickedIndex);
.这是您修改后的 JavaScript:
var bigbox = null;
var clickedIndex = -1;
var boxElements=$(".box");
var bigboxElements=$(".bigbox");
var removeItElements=$(".removeit");
boxElements.click(function() {
clickedIndex = boxElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
bigbox.addClass("show");
TweenLite.to(bigbox, 0.5, {opacity: 1,autoAlpha: 1});
});
removeItElements.click(function() {
clickedIndex = removeItElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
TweenLite.to(bigbox, 0.5, {autoAlpha: 0,opacity: 0});
});
这种方法的唯一问题是它非常依赖于 HTML 的布局顺序。
关于javascript - 添加和删除类不同的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30382841/
本文实例讲述了MySQL学习笔记之数据的增、删、改实现方法。分享给大家供大家参考,具体如下: 1、增加数据 插入代码格式: insert into 表明 [列名…] values (值…)
有时候我们需要扩展一个数组,或者删掉数组的一部分,PHP为扩展和缩小数组提供了一些函数。对于那些希望模仿各种队列实现(FIFO、LIFO)的程序员来说,这些函数可以提供便利。顾名思义,从这些函数的函
作为一个小型的数据存储传递的工具——xml,大家肯定也不陌生,今天就关于xml的一些简单操作做些总结。 这些都是在控制台进行操作的····&m
话不多说,请看代码: ? 1
本文实例讲述了mysql语句实现简单的增、删、改、查操作。分享给大家供大家参考,具体如下: 1、创建db_shop数据库,如果该数据库不存在则创建 ?
使用oracle触发器 实现对某个表的增改删的监控操作,并记录到另一个表中。 代码: 复制代码代码如下: create or replace trigger test_trigge
java连接数据库增、删、改、查工具类 数据库操作工具类,因为各厂家数据库的分页条件不同,目前支持Mysql、Oracle、Postgresql的分页查询 在Postgresql环境测试过了,其他
1、修改数据 复制代码代码如下: DataRow dr =
注册表可以用来进行存储一些程序的信息,例如用户的权限、或者某些值等,可以根据个人需要进行存储和删减。 当前注册表主目录: 引用包 Wesky.Net.OpenTools 1.0.5或
准备工作: 增、删、改、查的方法有很多很多种,这里只展示出常用的几种。 ?
需要5个类: 1.实体类:Person.java 2.抽象类:SQLOperate.java(封装了对数据库的操作) 3.助手类:DBOpenHelper.java(继承SQLiteOpenH
首先是是一个简单的例子,单链表的建立和输出。 程序1.1 复制代码 代码如下: #include<iostream> #include<string> using na
数据库操纵基本流程为: 1、连接数据库服务器 2、选择数据库 3、执行SQL语句 4、处理结果集 5、打印操作信息 其中用到的相关函数有 •resource m
CRUD是Create(创建)、Read(读取)、Update(更新)和Delete(删除)的缩写,它是普通应用程序的缩影。如果您掌握了某框架的CRUD编写,那么意味可以使用该框架创建普通应用程序了
项目结构: 添加页面: &
本文实例讲述了android操作sqlite数据库(增、删、改、查、分页等)及listview显示数据的方法。分享给大家供大家参考,具体如下: 由于刚接触android开发,故此想把学到的基础知识
总括 pandas的索引函数主要有三种: loc 标签索引,行和列的名称 iloc 整型索引(绝对位置索引),绝对意义上的几行几列,起始索引为0 ix 是 iloc 和 loc的合体 at
1. [代码]Mybatis全局配置文件 ? 1
我是一名优秀的程序员,十分优秀!