点击jQuery只会触发一次

我写了一个函数，当点击箭头时左右移动我的滑块。滑块通过更改URL中的哈希来工作。点击jQuery只会触发一次

功能：

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(); 
}); 
});

箭头举例：

<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>

所以在人物之一，它的工作原理。但在数字二和三，它不。它发射后不会再发射。

图二和三：

<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>

我怎样才能得到这个工作？

谢谢！

来源

2017-03-02 Quesofat

你的箭头都有相同的ID，尝试给他们一个类，而不是在你的脚本中使用它。

来源

2017-03-02 16:30:29

对于两个或多个元素，HTML元素ID不能相同。

来源

2017-03-02 16:32:59 lkdhruw

点击jQuery只会触发一次

回答

相关问题