點擊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只會觸發一次

回答

相關問題