html 奇数div,使用奇数偶数类的Javascript DOM操作
我有像这样的HTML
Lorem ipsum
dolor sit amet
consectetur adipiscing
sed do
eiusmod tempor
incididunt ut
Click
我想只显示这样的两个段落
Lorem ipsum
// every 'odd' class will show here
dolor sit amet
// every 'even' class will show here
Click
规则是“从’#p1’开始,只有一个段落会在点击按钮上改变,从奇数到偶数,奇数类将改为另一个奇数类,甚至类将改为另一个偶数类”.
示例第一次更改将如下所示(第一次单击按钮)
consectetur adipiscing
// #p1 change to #p3
dolor sit amet
示例第二次更改(第二次单击按钮)
consectetur adipiscing
sed do
// #p2 change to #p4
单击下一步按钮将改变奇数,然后是偶数,奇数,偶数等等.
有人请帮助我,我将非常感谢..
$(document).ready(function(){
var first_odd = $('.oddeven').children('.odd')[0];
var first_even = $('.oddeven').children('.even')[0];
$(first_odd).addClass('active');
$(first_even).addClass('active');
var odd_sibs = $(first_odd).siblings('.odd');
var even_sibs = $(first_even).siblings('.even');
$('.btnClick').on('click', function(){
// I don't know what to do
})
})
.odd {
color: red;
}
.even {
color: blue;
}
.oddeven p {
display: none;
}
.active {
display: block!important;
}
Lorem ipsum
dolor sit amet
consectetur adipiscing
sed do
eiusmod tempor
incididunt ut
Click
解决方法:
这是一种方法:
var odd = $(".odd") // save a reference to the list of odd
var even = $(".even") // and the list of even elements
odd.eq(0).addClass("active") // display the first odd
even.eq(0).addClass("active") // and first even
odd.prependTo(".oddeven") // move the odd ones in front of the even
// so that when visible they'll always be
// before the even
var current = 0 // index of item currently shown
var next = odd // type to show next
$("button.btnClick").on("click", function() {
if (next === odd) // if next is odd
current = (current + 1) % odd.length // go to next index
next.filter(".active").removeClass("active") // deactivate previous one
next.eq(current).addClass("active") // activate next
next = next === odd ? even : odd // set which type to do next
})
.odd { color: red; }
.even { color: blue; }
.oddeven p { display: none; }
.active { display: block!important; }
p1 - Lorem ipsum
p2 - dolor sit amet
p3 - consectetur adipiscing
p4 - sed do
p5 - eiusmod tempor
p6 - incididunt ut
Click
标签:jquery,javascript,html
来源: https://codeday.me/bug/20190522/1154307.html
html 奇数div,使用奇数偶数类的Javascript DOM操作相关推荐
- 第三周项目4(2)-顺序表应用 将所有奇数移到所有偶数前面
/* copyright (t) 2016,烟台大学计算机学院 *All rights reserved. *文件名称:1.cpp *作者:邵雪源 *完成日期:2017年9月19日 *版本号:v1.0 ...
- Python 让所有奇数都在偶数前面,而且奇数升序排列,偶数降序排序
这个问题的要求是: 让所有奇数都在偶数前面,而且奇数升序排列,偶数降序排序,比如说 字符串'1982376455',变成'1355798642' 具体代码: def func1(l):if isins ...
- 奇数在前,偶数在后;奇数按从大到小排序;偶数按从小到大排序。对其重新排序。
蒜术师给了你一个 10 个整数的序列,要求对其重新排序.排序要求: 奇数在前,偶数在后: 奇数按从大到小排序: 偶数按从小到大排序. 输入格式 输入一行,包含 1010 个整数,彼此以一个空格分开,每 ...
- 数据结构例9.编写一个算法,将带头结点的单向链表 拆分成一个奇数链表和一个偶数链表,并分别输出
/* 编写一个算法,将带头结点的单向链表 拆分成一个奇数链表和一个偶数链表,并分别输出 */ # include <iostream> # include <stdlib.h> ...
- c语言输入一批正整数 求其中的偶数和,编程,输入一批整数,先求出其中的偶数和及奇数和,然后输出偶数和与奇数和的差...
设计一个程序,要求输入三个整数,能求出其中最大的数并输出 #includeintmain{inti;inta1,a2,a3;printf("输入三个数:\n");scanf(&qu ...
- c语言6行6列元素奇数的个数,C语言任意输入n个整数,分别统计奇数的和.奇数的个数.偶数的和.偶数的个数....
输入任意2个整数m和n,计算并输出这两个数(包括这2个数)之间所有奇数之和(C语言) //#includevoidmain(){intm,n,i,min,max;printf("Please ...
- C语言:使用指针,封装一个函数, // 使输入的奇数从小到大排列,奇数排列完毕之后,再把偶数从大到小进行排列, // 最终输出整个
// 使用指针,封装一个函数, // 使输入的奇数从小到大排列,奇数排列完毕之后,再把偶数从大到小进行排列, // 最终输出整个 #include <stdio.h> void Jopai ...
- 将数组的奇数放在前面,偶数放在后面
场景一:将所有的奇数放在前面,偶数放在后面. 思路:定义左右游标,left和right,当left和right没有相遇的时候,先从左边开始遍历,如果遇到的是偶数,left++,继续寻找,直到找到一个奇 ...
- 28.从键盘输入10个正负相间的整数,输出个位数是奇数.十位数是偶数的所有数
28.从键盘输入10个正负相间的整数,输出个位数是奇数.十位数是偶数的所有数 //28.从键盘输入10个正负相间的整数,输出个位数是奇数.十位数是偶数的所有数 #include<stdio.h& ...
最新文章
- QMessageBox对话框
- Linux EXT3文件系统下成功恢复误删的文件
- JDK中没有jre文件夹和tools.jar文件
- SAP 电商云 Spartacus UI 根据 CMS Component uid 获取数据
- 电脑无线网络与服务器共享,图文详解win7笔记本如何实现内置无线局域网卡共享...
- python非法语句是_python 如何优雅的处理大量异常语句?
- vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能
- 微服务架构 vs SOA架构
- XOS 源码详解2: os_s_xxxx.s 汇编代码的段定义AREA,程序入口ENTRY,程序结尾END.
- linux 查询mysql编码格式_Linux 修改MySQL编码格式
- Java使用Jacob转换Word为HTML
- 关于VM14中安装win 10遇到的小问题
- 红外倒车雷达原理图_超声波倒车雷达电路图及原理分析
- windows开启ftp服务及FTP命令使用
- 如何拼局域网所有ip_在windows命令行批量ping局域网内IP
- 测试03:2022上半年:无处安放的空虚感
- 56.木秀于林,风必摧之
- 蒲公英 · JELLY技术周刊 Vol.11 Lighthouse 测试报告生成
- Windows下DOS窗口修改编码
- 系统时间不够精确?试试RTC(实时时钟)
热门文章
- 单链表反转 | 不合法的路径地址转变为合法路径
- 【JAVA】LeetCode力扣 第199场周赛 题解+代码
- linux内核损坏的原因,Linux内核报错“General protection fault”原因
- 成立一家投资管理有限公司的资本是多少?
- 您的鼓励,我的动力!(CSDN 2013年度博客之星评选)
- Android系统固件定制方式
- 从搜狐的开放的接口里读取数据
- Linux 虚拟文件系统四大对象:超级块、inode、dentry、file之间关系
- STM32F103学习记录——通过额外添加串口接口来接入ZigBee/蓝牙模块实现数据的远程传输
- 科研小技巧——MATLAB的编码风格