同じ関数を別のオブジェクトに適用する方法

クリックしたときに異なるdivが関数内で同じタスクを実行するようにする方法があるのだろうかと思います。ここに私がこれまで持っているものがあります。しかし、このコードを実行すると、何も起こらないようですが、エラーは表示されません。どんな助けもありがとう。同じ関数を別のオブジェクトに適用する方法

function animation() { 
    var counter = counters[0]; 
    if (counter < 80){ 
    position = counter * (100/80); 
    $("._0").css({"background-position": position + "% 0%"}); 
    counters[0]++; 
    } else { 
    counters[0] = 0; 
    } 
}

などのような関数を呼び出す：私は以下のように、直接アニメーション関数にパラメータをプラグインしている場合

<html> 
<head> 
</head> 
<body> 
<div id="works"> 
    <div class="dot" onclick="currentSlide(0)"></div> 
    <div class="dot" onclick="currentSlide(1)"></div> 
    <div class="dot" onclick="currentSlide(2)"></div> 
    <div class="dot" onclick="currentSlide(3)"></div> 
</div> 
<div class = "image"> 
    <img class = "phone" src = "img/phone.png"> 
    <div class = "ad _0"></div> 
    <div class = "ad _1"></div> 
    <div class = "ad _2"></div> 
    <div class = "ad _3"></div> 
</div> 
<script src="jquery-3.1.1.min.js"></script> 
<script> 
var slideIndex = 0, 
frames =[80,154,64,49], 
counters = [0,0,0,0]; 

showSlides(slideIndex); 

function animation(ad, frames, counter) { 
    if (counter < frames){ 
     position = counter * (100/frames); 
     $(ad).css({"background-position": position + "% 0%"}); 
     counter ++; 
    } else { 
     counter = 0; 
    } 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < dots.length; i++) { 
    $("._" + i).css({"visibility": "hidden"}); 
    } 
    $("._" + slideIndex).css({"visibility": "visible"}); 
    setInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); 
} 
</script> 
</body> 
</html>

setInterval(animation,150);

私は私が望む結果を得るが、手動で各パラメータをプラグインする必要はありません。\

出典

2016-11-30 user2724072

*何も*起きていないようにみえ - 何をすべきかあなたは起こることを期待している？ – RobG

基本的に、アニメーション化しているという錯覚を与えている各画像をパンすると仮定します。 – user2724072

あなたのコードの 'slideIndex'は常に' = 0'です。私は最後の関数 'showSlides'では' slideIndex'の代わりに 'n'から' slideIndex'に引数を変更するか、 'slideIndex'の代わりに' n'を使う必要があると思います。 –

setInterval(function() { 
    animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]) 
}, 150);

問題：機能animationを呼び出し、setIntervalに結果を渡すsetInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); あなたの元のコード。 には、関数式でラップすることによってanimationを呼び出す関数を渡す必要があります。

エラーは何ですか？ setIntervalに非機能を渡すと、多くのブラウザでサイレントモードで失敗します。

編集：フルコードを投稿していただきありがとうございます@ user2724072修正が必要な場合は、下記のコードを参照してください。また、何も起こらなければ、それはあなたのCSSコードのためかもしれません。 jsfiddleここにhttps://jsfiddle.net/uLq5nry5/3/のコードをクローンし、adを別の色に切り替えるようにコードを変更しました。

コード：

<html> 
<head> 
</head> 
<body> 
<div id="works"> 
    <div class="dot" onclick="currentSlide(0)"></div> 
    <div class="dot" onclick="currentSlide(1)"></div> 
    <div class="dot" onclick="currentSlide(2)"></div> 
    <div class="dot" onclick="currentSlide(3)"></div> 
</div> 
<div class = "image"> 
    <img class = "phone" src = "img/phone.png"> 
    <div class = "ad x0"></div> 
    <div class = "ad x1"></div> 
    <div class = "ad x2"></div> 
    <div class = "ad x3"></div> 
</div> 
<script src="jquery-3.1.1.min.js"></script> 
<script> 
var slideIndex = 0, 
frames =[80,154,64,49], 
counters = [0,0,0,0]; 

showSlides(slideIndex); 

function animation(ad, frames, counterIndex) { 
    var counter = counters[counterIndex]; 
    if (counter < frames){ 
     position = counter * (100/frames); 
     $(ad).css({"background-position": position + "% 0%"}); 
     counters[counterIndex]++; 
    } else { 
     counter[counterIndex] = 0; 
    } 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < dots.length; i++) { 
    $(".x" + i).css({"visibility": "hidden"}); 
    } 
    $(".x" + slideIndex).css({"visibility": "visible"}); 
    setInterval(animation(".x" + slideIndex, frames[slideIndex], slideIndex),150); 
} 
</script> 
</body> 
</html>

変更は： animation()は今の代わりcounterパラメータのcounterIndexパラメータを取ります。また、 '_ n'のクラスは 'x n'に置き換えられます。アンダースコアのクラス名は、ブラウザの互換性に関しては変わった癖があります。

理由： JavascriptがCのような "ポインター" を持っていないので、var counter = counters[i]; counter++;はcounters[i]の値を変更しません。

出典

2016-11-30 04:59:37

ちょっとカイル、応答に感謝します。私はこのソリューションを実装し、私はまだ何も考えていません。なぜか分かりません：\ – user2724072

あなたのコードの残りの部分を教えてください。これは、デバッグプロセスを大いに助けます。私はこれらの機能がどのように適用されているのかよくわかりません。 –

確かです。ただそれを更新しました。再度、感謝します！ – user2724072

UPDスニペットブローで見..私はあなたのコードslideIndex常に=0にthik

。showSlides最後の関数であなたがslideIndexにnから引数名を変更したり、関数の内部nを使用する必要がある代わりにslideIndex

この方法を試してみてください：

var slideIndex = 0, 
 
frames =[80,154,64,49], 
 
counters = [0,0,0,0]; 
 

 
showSlides(slideIndex); 
 

 
function animation(ad, frames, counter) { 
 
    if (counter < frames){ 
 
     position = counter * (100/frames); 
 
     $(ad).css({"background-position": position + "% 0%"}); 
 
     counter ++; 
 
    } else { 
 
     counter = 0; 
 
    } 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(n); 
 
} 
 

 
function showSlides(slideIndex) { 
 
    var dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < dots.length; i++) { 
 
    $("._" + i).css({"visibility": "hidden"}); 
 
    } 
 
    $("._" + slideIndex).css({"visibility": "visible"}); 
 
} 
 

 

 
var TOTAL = 4; //quatity of slides 
 
var currentGlobalIndex = 0; //number of first slide 
 

 
var nextSlideIndexFor = function(globalCounter){ 
 
    return globalCounter%TOTAL; 
 
} 
 

 
setInterval(function(){ 
 
    var nextSlideIndex = nextSlideIndexFor(currentGlobalIndex++); 
 
    
 
    animation("._" + nextSlideIndex, frames[nextSlideIndex], counters[nextSlideIndex]) 
 
    
 
    console.log("show slide number" + nextSlideIndex); 
 
},1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="works"> 
 
    <div class="dot" onclick="currentSlide(0)"></div> 
 
    <div class="dot" onclick="currentSlide(1)"></div> 
 
    <div class="dot" onclick="currentSlide(2)"></div> 
 
    <div class="dot" onclick="currentSlide(3)"></div> 
 
</div> 
 
<div class = "image"> 
 
    <img class = "phone" src = "img/phone.png"> 
 
    <div class = "ad _0"></div> 
 
    <div class = "ad _1"></div> 
 
    <div class = "ad _2"></div> 
 
    <div class = "ad _3"></div> 
 
</div>

出典

2016-11-30 05:18:24

同じ関数を別のオブジェクトに適用する方法

答えて

関連する問題