英文:
How can I display images 3 by 3, starting at position 0, by clicking the buttons according to the position of the button, in javascript
问题
当我点击按钮1时，从图像1开始，因为计数器为0；当我点击按钮2时，移动到图像4，计数器等于3；如果我点击按钮3，移动到图像7，计数器等于6。同时，反过来也应该工作，如果我点击按钮3，从图像7开始；如果我点击按钮2，应该移动到图像4；如果我点击按钮1，从图像1开始。
我有三个按钮，当我点击第一个按钮时，我处于位置0，计数器等于0；当我点击第二个按钮时，我处于位置1，计数器等于3；当我点击按钮3时，我处于位置2，计数器等于6。
我的意图是，无论何时点击按钮1，计数器都等于0；如果点击按钮2，计数器等于3；如果点击按钮3，计数器等于6，也就是说，当按钮的位置较高时，它将增加三个值，当点击的按钮位置较低时，它将减少三个值。
变量i是被点击的按钮位置。变量img是要比较的当前图像的编号。
假设使用if语句，会像这样：
let counter = 0;
if (i == 0) {
// 这里计数器等于0，counter = 0;
img[counter].style.background = "#acc2fa";
} else if (i == 1) {
counter = 3;
img[counter].style.background = "#084cf6";
} else if (i == 2) {
counter = 6;
img[counter].style.background = "#031a53";
}
我尝试简化，但不起作用，因为当条件等于0时不成立。
if (i != 0 || (img % 3) == 0) {
counter = counter + 3;
}
有关如何解决我的问题的建议吗？谢谢。
简化后的代码示例：
let counter = i * 3;
img[counter].style.background = ["#acc2fa", "#084cf6", "#031a53"][i];
这个简化后的代码将根据按钮位置i来设置counter，并根据i的值设置不同的背景颜色。这样，无论点击哪个按钮，都会按照你的要求更新counter和背景颜色。
英文:
I have a total of 9 images when I click on button 1 it starts at image 1 because the counter is 0, when I click on button 2 it moves to image 4 and the counter is equal to or is 3 and if I click on button 3 moves to image 7 and counter is equal to or equal to 6.
and should work backwards, if I click on button 3 it starts on image 7 and if I click on button 2 it should move to image 4 and if I click on button 1 start on image 1
I have three buttons when I click on the first one I am in position 0 and the counter is equal to 0, when I click on the second button I am in position 1 and the counter is equal to 3, when I click on button 3 I am in position 2 and the counter is equal to 6.
My intention is that whenever I click on button 1, the counter is equal to 0 and if I click on button 2, the counter is equal to 3 and if I click on button 3, the counter is equal to 6, that is, it will increase by three values when the position of the button is higher and will decrease by three when the position of the button that has been clicked is lower.
The variable i is the position of the button that is clicked. The variable img is the number of the current image to be compared
Let's say it would look like this using if but what I want is to make it simplified
let counter = 0;
if(i == 0){
// here the counter is equal to 0, counter = 0;
img0+网站访问量.style.background = "#acc2fa";
}else if(i == 1){
counter = 3;
img0+网站访问量.style.background = "#084cf6";
}else if(i == 2){
counter = 6;
img0+网站访问量.style.background = "#031a53";
}
I tried to simplify, but it does not work because when the condition is equal to 0 it is not fulfilled.
if(i !=0 ||( img % 3 ) == 0){
counter = counter + 3;
}
Any suggestions on how I could solve my problem thanks
答案1
得分: 0
const images = document.querySelectorAll(".image");
const onClick = (ev) => {
// 这里我们重置所有图像的背景
// 这样我们就没有保存计数器（以及先前选择的图像）的原因
[...images].forEach(img => img.style.background = "none");
const value = ev.target.dataset.index;
const index = (+value) * 3 - 3;
images[index].style.background = "#acc2fa";
}
.image-wrapper {
display: flex;
gap: 10px;
padding-block: 10px;
}
.image {
border: 1px solid black;
text-align: center;
width: 20px;
height: 20px;
}
<div class="image-wrapper">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
<div class="image">6</div>
<div class="image">7</div>
<div class="image">8</div>
<div class="image">9</div>
</div>
<button data-index="1" onclick="onClick(event)">1</button>
<button data-index="2" onclick="onClick(event)">2</button>
<button data-index="3" onclick="onClick(event)">3</button>
这里的基本操作是：有三个按钮，您可以为点击事件监听器创建3个不同的函数，如 "onButton1Click"、"onButton2Click" 和 "onButton3Click"，然后处理这些回调函数。通常这不是一个很好的方法，因为这种代码不易扩展（如果要添加5个以上的按钮，会怎样）。在这里，我仅使用了 data-* HTML5 属性来展示这种可能性（它具有一些优点，但在此示例中很难解释）。
您还可以避免使用它们，直接将 "按钮值" 传递给点击处理程序：
<button onclick="onClick(1)">1</button>
<button onclick="onClick(2)">2</button>
<button onclick="onClick(3)">3</button>
然后更改 onClick 处理程序：
const onClick = (value) => {
[...images].forEach(img => img.style.background = "none");
const index = value * 3 - 3;
images[index].style.background = "#acc2fa";
}
您要求翻译这一行：
const index = (+value)*3 - 3;
一元运算符 +value 将字符串转换为数字。所以 +"3" 等同于 3。我们需要这个是因为在我的第一个示例中使用了 data-* 属性（其中值是字符串，但我们需要数字）。
"公式" value * 3 - 3 并不是数学上的公式。我只是凭经验发现这是您示例的模式。
Value = 1 => 1 * 3 - 3 = 0（零索引，即第一个图像）
Value = 2 => 2 * 3 - 3 = 3（3 索引，即第四个图像）
Value = 3 => 3 * 3 - 3 = 6（6 索引，即第七个图像）
<details>
<summary>英文:</summary>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const images = document.querySelectorAll(".image");
const onClick = (ev) => {
// Here we are reseting background for all images
// In this way we do not have reason to save counter (and previously selected image)
[...images].forEach(img => img.style.background = "none")
const value = ev.target.dataset.index;
const index = (+value)*3 - 3;
images[index].style.background = "#acc2fa";
}
<!-- language: lang-css -->
.image-wrapper {
display: flex;
gap: 10px;
padding-block: 10px;
}
.image {
border: 1px solid black;
text-align: center;
width: 20px;
height: 20px;
}
<!-- language: lang-html -->
<div class="image-wrapper">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
<div class="image">6</div>
<div class="image">7</div>
<div class="image">8</div>
<div class="image">9</div>
</div>
<button data-index="1" onclick="onClick(event)">1</button>
<button data-index="2" onclick="onClick(event)">2</button>
<button data-index="3" onclick="onClick(event)">3</button>
<!-- end snippet -->
What we are doing here basically is: You have three buttons, you can make 3 different functions for a click event listeners such as "onButton1Click" "onButton2Click" "onButton3Click" and then handle those callbacks. Usually its not that good approach since that kind of code does not scale (what if you want to add 5 buttons more or something like that). Here i am using data-* HTML5 attributes just to show you that possibility as well (it has some advantages, but are complex to explain in this example).
You can also avoid using them and pass "button value" directly to a click handler:
<button onclick="onClick(1)">1</button>
<button onclick="onClick(2)">2</button>
<button onclick="onClick(3)">3</button>
And then change onClick handler:
const onClick = (value) => {
[...images].forEach(img => img.style.background = "none")
const index = value * 3 - 3;
images[index].style.background = "#acc2fa";
}
You asked for this line:
const index = (+value)*3 - 3;
plus unary operator (`+value`) converts string to a number. So `+"3"` is the same as `3`. We needed that in case when we used data-* attribute (in my first example) since the value is string and we needed number.
"Formula" `value * 3 - 3` is not any math. I just heuristically figured out that thats a pattern for your example.
Value = 1 => 1 * 3 - 3 = 0 (zero index thats first image)
Value = 2 => 2 * 3 - 3 = 3 (3 index thats fourth image)
Value = 3 => 3 * 3 - 3 = 6 (6 index thats seventh image)
</details>
# 答案2
**得分**: 0
posted code doesn't reset the background of an image that has been clicked already. Try initializing the counter by putting `let counter = 0;` in application code, in scope of the click handler but **not** within it. Then, in the click handler, clear the current `img0+网站访问量` before setting it according to `i`:
```js
img0+网站访问量.style.background = "revert"; // clear image background
if(i == 0){
counter = 0; // move resetting `counter` to zero here
img0+网站访问量.style.background = "#acc2fa";
}else if(i == 1){
counter = 3;
img0+网站访问量.style.background = "#084cf6";
}else if(i == 2){
counter = 6;
img0+网站访问量.style.background = "#031a53";
}
英文:
The posted code doen't reset the background of an image that has been clicked already. Try initializing the counter by putting let counter = 0; in application code, in scope of the click handler but not within it. Then, in the click handler, clear the current img before setting it according to i:
img[counter].style.background = "revert"; // clear image background
if(i == 0){
counter = 0; // move resetting `counter` to zero here
img[counter].style.background = "#acc2fa";
}else if(i == 1){
counter = 3;
img[counter].style.background = "#084cf6";
}else if(i == 2){
counter = 6;
img[counter].style.background = "#031a53";
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论