JS点击一次按序进切换数组数据

最新推荐文章于 2022-09-11 14:42:09 发布
最新推荐文章于 2022-09-11 14:42:09 发布
阅读量748 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42124996/article/details/104602702
版权 
<html>
    <head lang="en">
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="text"></div>
        <input type="button" value="切换"  onclick="clickMe()">
    </body>
    <script>
        var arr = [
            {"name":"第一集","id":1},
            {"name":"第二集","id":2},
            {"name":"第三集","id":3},
            {"name":"第四集","id":4},
            {"name":"第五集","id":5},
            {"name":"第六集","id":6},
            {"name":"第七集","id":7},
        ];
        var clickNmu = 0;
        function clickMe(){
            clickNmu ++;
            for (i = 0; i < arr.length; i++) { 
                if(clickNmu < arr.length + 1){
                    if(arr[i].id == clickNmu){
                        document.getElementById("text").innerHTML = arr[i].name;
                        console.log(clickNmu)
                    }
                };
                if(clickNmu >= arr.length + 1){
                    clickNmu = 0;
                    console.log(clickNmu)
                }
            }
        }
    </script>
</html>
weixin_42124996
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 数组 点击一次加一，直到最后一个------------------换到第一个继续开始
weixin_34121304的博客
04-25 947
2019独角兽企业重金招聘Python工程师标准>>> ...
iOS 点击UIButton切换数组元素
ZZQCSN的博客
11-27 782
#import "ViewController.h" @interface ViewController () {     NSMutableArray *DataArray;     int page; } ///数组元素 @property (weak, nonatomic) IBOutlet UILabel *NumberLabel;
js自动切换
weixin_47723644的博客
09-17 456
display 思路：先将所有的图片设置为display：none,再设置一个值从0开始，将对应的图片设置display:block，当值大于图片个数时，将值重新设为0. 这种方法比较容易理解，同时更容易编写，不需要计算偏移量，但是无法出现切换的过程（transition） animation 这种方法只需要用到css中的animation属性，比较简洁，但是需要提前将图片拼起来，并且也要计算偏移量 js偏移 思路：将图片并排或并列排放，设置position属性，并计算好每次的偏移量，让它的偏移量到达一定
点击事件，根据不同的下标实现切换不同的内容
weixin_30810583的博客
08-07 548
背景： 　　两个表格，根据左边的表格的点击事件 　　右边的表格切换展示的内容 1.绑定事件，获得当前表格点击行的下标 2.定义4个数组，默认结构为空数组 3.组件加载的时候，把第一个数组赋值给表格 4.定义事件内容，实现根据当前行的下标切换对应的内容 转载于:https://www.cnblogs.com/wuhe...
利用js实现页面跳转,带数据
tb_problem的博客
10-23 1959
抽点时间分享个小东西。 利用js来实现页面跳转。 结论： js实现页面跳转，并带数值过去；简答有效的方式就是建立一个临时form，用于数据传输。 起因：系统要搞个操作日志记录。点击查看文件的排行榜，可以点击直接查看。 系统中的文件分为两种： 一种是从其他网站爬过来的文章，将内容（建议存html，当然如果想要统一样式的话就存纯文本，分隔...
Vue.js在数组中插入重复数据的实现代码
01-19
1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by=$index来实现。 2、不使用track-by=”$index”的数组插入，数组不支持重复数据的插入  2.1 JavaScript代码 [removed][removed] ...
JS数组去掉重复数据只保留一条的实现代码
10-21
主要介绍了JS数组去掉重复数据只保留一条的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
js一维数组与三维数组互动，数据转换，类似购物车添加删除
最新发布
01-09
使用javascript将一维数组做一定的转换，增加一些变量，然后将变更后的一维数组转化为三维数组，再然后是一位数组和三维数组的联动，类似于购物车的添加和减少的效果。 交互效果参考：...
JavaScript实现将数组数据添加到Select下拉框的方法
12-04
本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法。分享给大家供大家参考。具体如下： 这里演示将数组中的数据添加到Select下拉菜单中的效果，当你点击下拉框的时候，就动态加载了数据，更换Select...
【VUE组件开发】VUE随意点击列表元素切换选中样式，并有序数组添加索引和数值
劲枫的博客
08-28 2314
直接查看代码以及样式 &lt;template&gt; &lt;div&gt; &lt;!--顶部step--&gt; &lt;div class="dataStep"&gt; &lt;!--&lt;img src="static/images/DataBgc.png" alt=""&gt;--
js对数组的操作 数据间转换
weixin_30567471的博客
03-27 84
//数组元素的添加 arr.push([item1],[item2]...[itemn]);//将一个或者多个元素添加到数组结尾，返回数组新长度 arr.unshift([item1],[item2]...[itemn]);//将一个或者多个元素添加到数组开始，数组自动后移 arr.splice(insertPos,0,[item1],[item2]...[itemn]);//将一个或者...
vue遍历数组可以单击进行颜色切换，或者通过按钮进行整体切换
qq_40322724的博客
04-15 988
开始是蓝色 再点击变红，再点击就会恢复原来颜色 还可以点击某一个进行切换 下面上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/java...
巧用数组实现多个内容切换
weixin_30399155的博客
08-16 183
先看下我开始写的代码吧： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>切换红绿蓝</title> 6 <style> 7 #...
Vue----数据源中数组的操作
cjx177187的博客
09-11 283
会发现其实数组中的元素是改变了的，只是页面没有刷新所以就没有渲染到页面上。因为对于对象取成员官方是做了劫持的，但是数组取下标正好官方没有做劫持。原因很简单，数组的下标是可以有无限个的，换句话说就是劫持不过来。运行代码，点击按钮会发现页面上第一个元素并没有被改变，但是数组中的元素改变了吗？当然不是我们可以使用数组的方法来修改其元素。或者利用数组取下标的方式修改元素后，刷新页面。// 修改第一个元素的值。// 修改第一个元素的值。// 修改第一个元素的值。// 修改第一个元素的值。>改变第一个元素
javascript 输出数组元素内容（获取数组元素内容）
热门推荐
KLW75
02-23 1万+
javascript 中数组对象的元素值输出的，这里记录3种 1、通过下标来获取数组元素值。 通过数组对象的下标获取制定的元素值，例如：获取元素中第1个元素的值， list = new Array(1,2,3,4,5) var a = list[0] 这样a 就是list 的第一个元素的值了。 重要 ，这里要是输出的元素的下标超过了数组的范围，那么就会输出 undefined了 只有两项的数组，输出数组的第三项的值就会获得undefined。 2、用for 语句获取数组的元素值 用这个
js 数组转换操作
weixin_39054337的博客
06-29 1581
1、ES6语法find查找匹配数组 let data = [ {id:1,value:false}, {id:2,value:false}, {id:3,value:false} ]; let id = 3 let findVal = data.find(item => { return item.id === id }) findVal.value = true; //修改匹配项的值 2、ES6 findIndex 对象数组查找某一个对象 findIndex(
JS实现六个数据为一组换一换
m0_46364033的博客
03-17 2012
想要实现的效果如下：（此代码仅对数据总数＞6时做处理，具体情况具体分析，主要就是为了实现：点击换一换时数据6个为一组，如此往复循环展示，且此div在页面中位置保持不变） JS代码如下：（！！提示其中divHtml只是我自己项目需要的样式） let metaData = res.data; // 获取到的数据 let len = metaData.length; // 如果得到的关键词数据长度大于6 if(len > 6){ // 处理数组，六个一小组 let num = 0; let mul
vue.js 点击任意数组，切换位置到最前面，同时更新视图显示
qq_36229552的博客
09-04 1585
效果图如下： 调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值
vue3点击按钮，怎么将数组切换到另一个数组
03-25
您可以使用Vue的响应式特性来切换数组并更新UI。以下是一个示例： HTML代码： ``` <div id="app"> <button @click="changeArray">切换数组</button> <ul> <li v-for="item in myArray" :key="item">{{ item }}</li> </ul> </div> ``` JavaScript代码： ``` new Vue({ el: '#app', data: { myArray: ['数组1', '数组2', '数组3'], otherArray: ['新数组1', '新数组2', '新数组3'] }, methods: { changeArray() { this.myArray = this.otherArray; } } }) ``` 在上面的例子中，我们定义了两个数组`myArray`和`otherArray`，并且在Vue实例的`data`对象中声明它们。我们还定义了一个`changeArray`方法，它会将`myArray`替换为`otherArray`。在按钮的`click`事件中，我们调用了这个方法来切换数组。 在HTML中，我们使用了`v-for`指令遍历`myArray`并动态创建`li`元素。由于我们切换了数组，Vue会自动更新UI以反映更新后的数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值