如果你有很多数据，你可能希望将这些数据存储在一个数组中，然后使用JavaScript的数组方法来实现"换一批"的功能。
以下是一个简单的例子，它使用一个数组来存储一些数据，然后在按钮被点击时，会显示数组中的下一个数据。
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
<script>
var data = ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5"];
var currentIndex = 0;
function displayData() {
var text = document.getElementById("displayText");
text.innerHTML = data[currentIndex];
}
function nextData() {
currentIndex = (currentIndex + 1) % data.length;
displayData();
}
</script>
</head>
<body>
<h1 id="displayText">Data 1</h1>
<button onclick="nextData()">Next</button>
</body>
</html>
在这个例子中，我们首先定义了一个数组data，它包含了五个字符串。然后我们定义了一个变量currentIndex，它用于跟踪当前显示的数据的索引。
我们还定义了两个函数：displayData()和nextData()。displayData()函数用于显示当前的数据，而nextData()函数用于显示下一个数据。nextData()函数首先将currentIndex增加1，然后使用模运算符确保索引不会超出数组的范围。然后，它调用displayData()函数来显示新的数据。
在HTML中，我们创建了一个按钮，并将它的onclick属性设置为"nextData()"，这意味着当按钮被点击时，会调用nextData()函数，显示数组中的下一个数据。
以上这个逻辑思路在任何语言中同理。
假如我是用arkTS开发 ，准备做一个卡片功能，注意卡片只有api9版本才有
点击换一批就可以实现下一个图片切换显示。
@Entry
@Component
struct WidgetCard {
@State onActive:number=0
@State arrImage: Object[] = [
{
name:'你好',
image:$r("app.media.hello"),
content:'一手食指指向对方。一手握拳，向上伸出拇指。',
video:$rawfile('hello.mp4')
},
{
name:'谢谢',
image:$r('app.media.thank'),
content:'一手伸出拇指，弯曲两下，表示向人感谢。',
video:$rawfile('thank.mp4')
},
{
name:'爱',
image:$r('app.media.love'),
content:'一手轻轻抚摩另一手拇指指背，表示一种“怜爱”的感情',
video:$rawfile('love.mp4')
},
{
name:'喜欢',
image:$r('app.media.live'),
video:$rawfile('like.mp4'),
content:'一手拇、食指微曲，指尖抵于颌下，头微微点动一下。 ',
},
{
name:'不喜欢',
image:$r('app.media.dislike'),
video:$rawfile('dislike.mp4'),
content:'一手伸直，左右摆动几下。 一手拇、食指微曲，指尖抵于颌下，头微微点动一下。 ',
},
{
name:'饭',
image:$r('app.media.eat'),
video:$rawfile('eat.mp4'),
content:'（一）一手拇、食指相对，中间留有米粒大小距离。（二）一手伸食、中指象征筷子，作吃饭动作。',
},
{
name:'快',
image:$r('app.media.quick'),
video:$rawfile('quick.mp4'),
content:'一手拇、食指相捏，很快地从一侧向另一侧作快速挥动，象征物体运动速度很快。',
},
{
name:'慢',
image:$r('app.media.slow'),
video:$rawfile('show.mp4'),
content:'一手掌心向下，慢慢地上下微动几下，象征物体运动速度缓慢。',
},
{
name:'没关系',
image:$r('app.media.matter'),
video:$rawfile('matter.mp4'),
content:'一手拇、食、中指捻动，连续几次。 两手拇、食指搭成圆圈，互相套环。 ',
},
{
name:'厉害',
image:$r('app.media.powerful'),
video:$rawfile('powerful.mp4'),
content:'一手打手指字母“L”的指式，并绕脸部转一圈。同时面部作出严厉的表情。 ',
},
];
/*
* The max lines.
*/
readonly MAX_LINES: number = 1;
/*
* The action type.
*/
readonly ACTION_TYPE: string = 'router';
/*
* The message.
*/
readonly MESSAGE: string = 'add detail';
/*
* The ability name.
*/
readonly ABILITY_NAME: string = 'EntryAbility';
/*
* The with percentage setting.
*/
readonly FULL_WIDTH_PERCENT: string = '100%';
/*
* The height percentage setting.
*/
readonly FULL_HEIGHT_PERCENT: string = '100%';
@State imageCard: Resource = $r("app.media.love")
@State immersive: string='爱'
@State detail_immersive: string='一手轻轻抚摩另一手拇指指背，表示一种“怜爱”的感情。'
build() {
Stack() {
Image(this.arrImage[this.onActive]['image'])
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)
Column() {
Text(this.arrImage[this.onActive]['name'])
.fontSize($r('app.float.title_immersive_font_size'))
.textOverflow({
overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.text_font_color'))
.maxLines(this.MAX_LINES)
Text(this.arrImage[this.onActive]['content'])
.fontSize($r('app.float.detail_immersive_font_size'))
.opacity($r('app.float.detail_immersive_opacity'))
.margin({
top: $r('app.float.detail_immersive_margin_top') })
.textOverflow({
overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.text_font_color'))
.maxLines(this.MAX_LINES)
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.End)
.padding($r('app.float.column_padding'))
Flex({
direction: FlexDirection.Row, justifyContent: FlexAlign.Center }){
Image($r("app.media.ic_new")).width(11).height(11)
.margin({
left:10,
top:3,
right:5
})
Text("换一批").fontSize('8fp').width(40)
.fontColor('#fff')
.margin({
top:3
})
.onClick(()=>{
this.onActive=(this.onActive+1)%this.arrImage.length;
})
}.backgroundColor('#ff986ec8')
.width(50)
.height(15)
.borderRadius(10)
.margin({
top:-120,
left:-100
})
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.onClick(() => {
postCardAction(this, {
"action": this.ACTION_TYPE,
"abilityName": this.ABILITY_NAME,
"params": {
"message": this.MESSAGE
}
});
})
}
}