英文:
JS function working in console but not onClick event in HTML
问题
以下是您要翻译的内容：
"我想知道我的代码有什么问题，但无法弄清楚发生了什么。
这是JS代码：
const slider = document.querySelector('.slider');
let newTranslate = 0
const next = () => {
newTranslate -= 100
slider.style.transform = `translateX(${newTranslate}%)`
};
const prev = () => {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
};
以及我的HTML：
<section class="quote">
<a onclick="prev()">
<i class="arrow arrow-left"></i>
</a>
<div class="slider-container slider-1">
<div class="slider">
<div class="slide slide-1">
<div class="quote_container">
...
</div>
</div>
</div>
</div>
<a onclick="next()">
<i class="arrow arrow-right"></i>
</a>
</section>
奇怪的是 next() 正常工作，但 prev() 仅在页面加载后工作一次。当我点击 next() 然后 prev() 时，prev() 不起作用。
当我在控制台中运行函数时，它完美运行。
似乎没有异步元素，所以我完全不明白。
有人可以帮助吗？
非常感谢！"
英文:
I'm wondering what's wrong with my code but can't figure out what's going on.
Here is the JS
const slider = document.querySelector('.slider');
let newTranslate = 0
const next = () => {
newTranslate -= 100
slider.style.transform = `translateX(${newTranslate}%)`
};
const prev = () => {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
};
and my HTML
<section class="quote">
<a onclick="prev()">
<i class="arrow arrow-left"></i>
</a>
<div class="slider-container slider-1">
<div class="slider">
<div class="slide slide-1">
<div class="quote_container">
...
</div>
</div>
</div>
</div>
<a onclick="next()">
<i class="arrow arrow-right"></i>
</a>
</section>
What is strange is that next() is working good but prev() only working once after the page is loaded. When I click next() and then prev(), prev() is not working.
When I run the function in the console it's working perfectly.
It seems there is no async element so I don't understand at all.
Someone could help?
Thanks a lot
答案1
得分: 2
因为您的滑块元素位于堆栈中的左箭头（prev()）上面，所以当它向左移动时，它会位于顶部，从而阻止您的点击。只需将链接设置为position:relative，并且z-index为1（或高于滑块），它就应该可以正常工作。
.quote a {
color: red;
position: relative;
z-index: 1;
cursor: pointer;
}
请注意，上述代码是对您提供的代码的翻译和补充，以使其更清晰。
英文:
Its because your slider element is above the left arrow (prev()) in the stack, so when it shifts left it sits on top and thus blocks your click. Just set the links to be position:relative with a z-index:1 (or higher than the slider) and it should work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const slider = document.querySelector('.slider');
let newTranslate = 0
const next = () => {
newTranslate -= 100
slider.style.transform = `translateX(${newTranslate}%)`
};
const prev = () => {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
};
<!-- language: lang-css -->
.slider-container {
background: #ccc;
display: inline-block;
width: 100px;
}
.quote a {
color: red;
position: relative;
z-index: 1;
cursor: pointer;
}
<!-- language: lang-html -->
<section class="quote">
<a onclick="prev()">
<i class="arrow arrow-left">left</i>
</a>
<div class="slider-container slider-1">
<div class="slider">
<div class="slide slide-1">
<div class="quote_container">
...
</div>
</div>
</div>
</div>
<a onclick="next()">
<i class="arrow arrow-right">right</i>
</a>
</section>
<!-- end snippet -->
答案2
得分: -1
这是翻译好的内容：
"可能父标签的宽度不足以移动图标。另外，在滑块元素方面，我认为您在使用该元素的ID时，如果正确的话，您漏掉了 '#' 前缀。应该是：
const slider = document.querySelector("#slider");
```"
<details>
<summary>英文:</summary>
It might width parent tag is not enough to move the icon. Also with the slider element, I think u using the id for that element if right u missing the '#' prefix. It should be:
const slider = document.querySelector("#slider");
</details>
# 答案3
**得分**: -1
const prev = () => {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
};
// 更新prev()函数以检查newTranslate的最小值
const prev = () => {
if (newTranslate <= 0) {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
}
};
<details>
<summary>英文:</summary>
const prev = () => {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
};
// Update the prev() function to check for the minimum value of newTranslate
const prev = () => {
if (newTranslate <= 0) {
newTranslate += 100
slider.style.transform = `translateX(${newTranslate}%)`
}
};
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论