[英]jQuery on click only fires once
I wrote a function to move my slider left and right when an arrow is clicked. 我编写了一个函数,可在单击箭头时左右移动滑块。 The slider works by changing the hash in the url.
滑块可通过更改url中的哈希值来工作。
Function: 功能:
var navigateGalleryForward = function() {
var pathName = window.location.href;
if (pathName.indexOf("item-1") != -1) {
window.location.hash = "item-2";
} else if (pathName.indexOf("item-2") != -1) {
window.location.hash = "item-3";
} else if (pathName.indexOf("item-3") != -1) {
window.location.hash = "item-1";
} else {
console.log("Something went wrong navigating the gallary..")
}
};
var navigateGalleryBackward = function() {
var pathName = window.location.href;
if (pathName.indexOf("item-1") != -1) {
window.location.hash = "item-3";
} else if (pathName.indexOf("item-2") != -1) {
window.location.hash = "item-1";
} else if (pathName.indexOf("item-3") != -1) {
window.location.hash = "item-2";
} else {
console.log("Something went wrong navigating the gallary..")
}
};
$(document).ready(function() {
$("#left-arrow").on('click', function () {
console.log("I work");
navigateGalleryBackward();
});
$("#right-arrow").on('click', function () {
console.log('work');
navigateGalleryForward();
});
});
Arrows Example: 箭头示例:
<figure class="item one">
<img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url }}" alt="left">
<img onclick="navigateGalleryForward" id="right-arrow"src="{{ 'arrow-right.png' | asset_url }}" alt="right">
<h1 style="color: white; font-weight:bold; font-size: 2rem; margin-top:2em; ">5 New Sensors for Control4</h1>
<p style="color: white; font-size:1.2rem;">Learn more about Dome's new line of cross-compatible sensors.</p>
<img style="height: 150px; margin-top: 3em; margin-right: 3em;"class="figure_h" src="{{ 'slide_show_1.jpg' | asset_url }}" />
<button style="margin-top: 3em; display:block; margin: auto;" class="btn_k">BUY NOW</button>
</figure>
So on figure one, it works. 因此,在图一中,它可以工作。 But on figures two and three it doesn't.
但是在图二和三上却没有。 After it has fired, it won't fire again.
触发后,它将不会再次触发。
Figures two and three: 图二和三:
<figure class="item two">
<img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url}}" alt="left">
<img onclick="navigateGalleryForward" id="right-arrow" src="{{ 'arrow-right.png' | asset_url }}" alt="right">
<h1 class="figure_h">2</h1>
</figure>
<figure class="item three">
<img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url }}" alt="left">
<img onclick="navigateGalleryForward" id="right-arrow" src="{{ 'arrow-right.png' | asset_url }}" alt="right">
<h1 class="figure_h">3</h1>
</figure>
How can I get this working? 我该如何工作?
Thank you! 谢谢!
您所有的箭头都具有相同的ID,请尝试给它们分配一个类,然后在脚本中使用它。
两个或多个元素的HTML元素ID不能相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.