Question

我对Javascript有点新鲜。我正在尝试这样做以便点击一个页面上的图像将您带到一个新页面并在该新页面上显示一个特定的div，因此我使用sessionStorage来记住和布尔值以跟踪正在点击的图像。现在，无论单击哪个图像，代码总是执行第一个if语句。这段代码在普通的java中运行正常，所以我无法弄清楚为什么我的if语句在javascript中被忽略了。我也尝试在最后添加一个'else'，并尝试===。这是我的javscript，谢谢！

 sessionStorage.clickedLeft;
 sessionStorage.clickedMiddle;
 sessionStorage.clickedRight;

         function openedProjectFromGallery() {
    if(sessionStorage.clickedLeft) {
        $(".left-project-pop-up").show();
    } else if (sessionStorage.clickedMiddle) {
        $(".middle-project-pop-up").show();
    } else if (sessionStorage.clickedRight) {
        $(".right-project-pop-up").show();
            }
    sessionStorage.clickedLeft = false;
    sessionStorage.clickedMiddle = false;
    sessionStorage.clickedRight = false;
}

   $("document").ready(function () {


   $(".pop-up .x-button").click(function(){
    $(".pop-up").hide();
});

   $(".project-description .x-button").click(function(){
    $(".project-pop-up").hide();

});

$(".left-project-thumb img").on("click", ".left-project-thumb img", function(){
    sessionStorage.clickedLeft = true;
    sessionStorage.clickedMiddle = false;
    sessionStorage.clickedRight = false;
    openedProjectFromGallery();
});

$(".profile-left-project img").click(function(){
    $(".left-project-pop-up").show(1000);

});

$(".middle-project-thumb img").on("click", ".middle-project-thumb img", (function(){
    sessionStorage.clickedMiddle = true;
    sessionStorage.clickedLeft = false;
    sessionStorage.clickedRight = false;
    openedProjectFromGallery();

});

$(".profile-middle-project img").click(function(){
    $(".middle-project-pop-up").show(1000);

});

$(".right-project-thumb img").on("click", ".right-project-thumb img", (function(){
    sessionStorage.clickedRight = true;
    sessionStorage.clickedLeft = false;
    sessionStorage.clickedMiddle = false;
    openedProjectFromGallery();

});

$(".profile-right-project img").click(function(){
    $(".right-project-pop-up").show(1000);

});


  });

Answer 1

您正在document.ready中定义openProjectFromGallery（）函数。在document.ready之外定义它，如果没有用某个值初始化或者它们是空的，也会在代码顶部给你的三个布尔值一些初始值。我希望这会有所帮助。

Answer 2

这不是你的原始问题的真正答案，因为你的代码的主要问题是，正如@ njzk2所说，openProjectFromGallery只被调用一次，而不是每个事件，但我想把我的这个代码看起来像两个硬币。

这是应该使用自定义事件的好例子

$(document).on('showPopup', function( e, popup ) {
    $('.'+popup + '-project-pop-up').show()
})

$(document).on('hidePopup', function( e ) {
    $('.popup').hide()
})

$('.left-project-thumb img').on('click', function(e) {
    $(document).trigger('showPopup', ['left'])
})

$('.right-project-thumb img').on('click', function(e) {
    $(document).trigger('showPopup', ['right'])
})

我觉得你有个主意。

另一方面，使用具有大量类似事件的事件委托以及dom数据总是很好。

<div class='popup' data-popup='left'>
   <img />
</div>   

$(document).on('click','.popup', function( e ) {
     $(document).trigger('showPopup', [$(this).data('popup')])
})

Answer 3

从我所看到的openProjectFromGallery只是在文档加载时被调用。

在每个事件处理函数中添加对它的调用，或使用jQuery's delegate function为每个图像分配事件处理。

Javascript忽略if语句

3 个答案: