1

私はここや他の場所で一日中検索して、最初はかなり簡単だと思っていたものを機能させる方法を見つけました。ようやく機能したと思いますが、もっと簡単な方法があるはずです。頭を壁にぶつけた後、私は検索をあきらめ、誰かにこれを簡単に行う方法を教えてくれるように頼んでいます。

これが私がしなければならないことです。サイトのいくつかのページに、ページの別の部分でアクティブな「div」を入れ替える「前へ」および「次へ」ボタンがあります。ビデオの再生開始、効果音、アニメーションなどの他のイベントをトリガーするには、特定の時間に「アクティブ」になる div に「アクティブ」クラスを割り当てる必要があります。同じスクリプトを使用できる必要があります。任意の数のページのいずれかから呼び出され、「スワップ可能な」div の総数はページによって異なります。「最初の」div がアクティブなときに「戻る」ボタンが押された場合、または「最後の」div がアクティブなときに「次へ」ボタンが押された場合、アクションは実行されません。

以下は私のjavascriptです

function swap(what) {
"use strict";
var theDivs = [], i;
$(".PortSwap").each(function() {
    var cid = $(this).attr("id");
    theDivs.push(cid);
});
for (i = 0; i < theDivs.length; i+=1) {
    if ($("#" + theDivs[i]).hasClass('active')) {
        var curDiv = i;
    } 
    $("#" + theDivs[i]).removeClass('active');
    $("#" + theDivs[i]).hide();
}
if (what === 1) {
    if ((curDiv + 1) < theDivs.length){
        $("#" + theDivs[curDiv + 1]).addClass('active');
        $("#" + theDivs[curDiv + 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }           
} else {
    if ((curDiv - 1) >= 0){
        $("#" + theDivs[curDiv - 1]).addClass('active');
        $("#" + theDivs[curDiv - 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }
}
}
window.onload = function () {
    "use strict";
    var pDivs = $(".PortSwap"), k;
    for (k = 0; k < pDivs.length; k += 1) {
        if (pDivs[k] !== -1) {
            $(".PortSwap").hide();
        }
    }
    $('#swap0').show();
    $('#swap0').addClass("active"); 
};

以下は私のhtmlです

 <div id="content">
  <div id="ncholder">
    <div id="ncframe"></div>
    <div class="PortSwap" id="swap0"><img src="img/nvc1.jpg" alt="Web Screen 1"></div>
    <div class="PortSwap" id="swap1"><img src="img/nvc2.jpg" alt="Web Screen 2"></div>
    <div class="PortSwap" id="swap2"><img src="img/nvc3.jpg" alt="Web Screen 3"></div>
  </div>
  <div id="ncnav">
    <img src="img/backward.gif" alt="Previous" onClick="swap(0)">
    <img src="img/forward.gif" alt="Next" onClick="swap(1)">
  </div>
</div>
</div>

ここでは css は重要ではないという印象を受けています。このための jsFiddle を作成しようとしましたが、現時点ではテスト サーバーで動作しているように見えますが、動作させることができませんでした。

助けてください！しばらく経ちましたが、私はjavascriptに慣れていません。私はjQueryが初めてです。前もって感謝します！

4

3 に答える 3