通过这段代码，我们可以将4个不同的文本值一个接一个地插入搜索字段（“装饰”，“健康”，“乐趣”，“昨天4”）。
但是我需要同时为每个文本值插入一个图像（逻辑上显示在搜索字段之外）。 请注意，下一个图像应该出现在第一个图像的位置，并删除这一个。
参见:http://jsfiddle.net/7bpal5hy/
null
const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4'];
let myInd = 0;
function setValue() {
document.getElementById('bbb').value = myValues[myInd];
myInd = myInd >= (myValues.length - 1) ? 0 : myInd+1;
}
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>null
您需要包含图像标记和图像列表作为排列，请看下面的示例
null
let init = 0;
const input = document.querySelector("input");
const img = document.querySelector("img");
const myValues = [
{
value: "Item 1",
image: "item-1.png",
},
{
value: "Item 2",
image: "item-2.png",
},
{
value: "Item 3",
image: "item-3.png",
},
{
value: "Item 4",
image: "item-4.png",
},
];
document.querySelector("form").addEventListener("submit", submitHandler);
function submitHandler(event) {
event.preventDefault();
const { value, image } = getCurrentValue();
input.value = value;
img.src = image;
img.alt = value;
updateInit();
}
function getCurrentValue() {
return myValues[init];
}
function updateInit() {
if (init < myValues.length - 1) {
init += 1;
} else {
init = 0;
}
}<img src="" alt="" />
<form>
<input />
<button type="submit">Click</button>
</form>