如果一個div存在，激活一個函數

我目前正在編寫一個帶有動畫元素的全屏幕滑塊。我希望這些內部元素可以通過與滑塊相同的按鈕（向右方向鍵）來激活，因此需要先檢查它們是否在那裏，然後再逐一激活它們。我有一個關於如何去解決這個問題的想法，就像這個例子中的部分被計數和命名一樣，但是作爲jQuery/Javascript的一個新手，我感覺有點不知所措。我嘗試應用的邏輯基本上是：如果一個div存在，激活一個函數

Onleftclick { 

Check if there are any "unactivated" elements in the slide 

If there isn't any, move on 

If there are elements in the slide, activate a function (eg "anim1) and change the "unactivated" div to "activated" 

As the animation is activated, the elements class changes to "activated" 

}

這是我從頭開始創建一些不帶教程的第一次嘗試，我會很感激的JavaScript更好的人熟悉我的問題閃亮的一些情況。目前，我正在努力做到這一點，如果裏面有一個「無效」div，它會變成「無效」，然後再次運行檢查。

一個codepen例如： http://codepen.io/anon/pen/ZYbVxG

當前文件在線託管： http://johncashin.net/test_sites/marc_comic_2/

有關聲明：

$(document).ready(function() { 
     //This counts the length of the sections 
     //var page is a variable that counts how many panels have been put across 
     var page = 0; 
     var sectionCount = $("section").length; 
     //This sets the variable bodysize, which multiplies viewportwidth by sectioncount 
     $('.container').css({ 
     'width': (vpw * sectionCount) + 'px' 
     }); 
     // Programatically add the class "1","2","3" etc to the sections consecutively, so  they can be scrolled to (ie scrollTo:3) 
    $('section').each(function(i) { 
    $(this).addClass('s' + i); 
    }); 
    // This is the keypress to activate scroll function 
    // there is also a variable that will stop it going above the amount of sections in the page. 
    window.onkeyup = function(scrollkey) { 
    var key = scrollkey.keyCode ? scrollkey.keyCode : scrollkey.which; 
    if (key == 39) { 
     if (page < sectionCount - 1) { 
     page++; 
     TweenLite.to(window, 1, { 
      scrollTo: { 
      x: $(".s" + page).position().left 
      }, 
      ease: Power2.easeIn 
     }); 
     } else {} 
    } else if (key == 37) { 
     //This adds backwards scrolling functionality, and stops the page variable from going any lower than 0, 
     if (page > 0) { 
     page--; 
     TweenLite.to(window, 1, { 
      scrollTo: { 
      x: $(".s" + page).position().left 
      }, 
      ease: Power2.easeIn 
     }); 
     } else {} 
    } 
    } 
});

來源

2014-12-03 ladanta

請添加您的（相關）「[MCVE]（http://stackoverflow.com/help/mcve）」代碼，你的問題，應該與其他網站倒下，失敗，刪除舊內容或重組，這個問題在沒有上下文的情況下變得毫無意義和無用。（此外，這僅僅是作爲建議，有一個特定的原因（參考：http://stackoverflow.com/help/on-topic#help-post-body，特別是數字** 1 **，以關閉問題不包括相關的代碼） – 2014-12-03 21:15:35

我正在使用的腳本現在已被添加 – ladanta 2014-12-03 21:18:49

將事件委託給文檔並使用css選擇器來處理需要響應事件的元素 – 2014-12-03 21:21:10

這將檢查具有階級一個div出現的任何unactive並將調用函數anim1()並刪除該類並添加一個新類active：

$("div.unactive").on('click', function() { 
    anim1(); 
    var obj = $("div.unactive"); 
    obj.removeClass("unactive"); 
    obj.addClass("active"); 
});

工作的jsfiddle：http://jsfiddle.net/9uasthp0/2/

來源

2014-12-03 21:30:28

非常感謝，我將努力將其添加到我的腳本中。 – ladanta 2014-12-03 21:38:56

@MarcMurray歡迎你，如果你覺得這回答了你的問題，請接受它作爲答案，以便其他人知道這個問題已得到解決。感謝和快樂的編碼！ :) – 2014-12-03 21:40:07

在使用這段代碼作爲上面發佈的IF語句的先驅時遇到問題，我希望此代碼僅在每個部分內部運行，我是否必須爲每個部分做不同的聲明？ – ladanta 2014-12-03 22:43:40

如果一個div存在，激活一個函數

回答

相關問題