0 
<script type="text/javascript">
$(document).ready(function() {



    var $item = $('div.imgItem'), //Cache your DOM selector
        visible = 1, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1, //End index
        imgIndex = 1; 

    $('div#imageItem' + imgIndex).click(function(){
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    });

});

私はスライドショーを作成しようとしています..私の問題は、変数 imgIndex が関数内で増加していることですが、関数が 2 回目に呼び出されても、まだ imgIndex の値は 0 です..誰かがこれについて私を助けてくれます..毎回パラメータとして渡される増分値..

@jfriend00ここに私のhtmlがあります

<div class="imgItem" id="imgItem0">
</div>
<div class="imgItem" id="imgItem1">
</div>
<div class="imgItem" id="imgItem2">
</div>
<div class="imgItem" id="imgItem3">
</div>
<div class="imgItem" id="imgItem4">
</div>

画像は各 div 内にロードされます。スライダーを作成しているので、次の画像をクリックしてスライドさせたい..そのため、div に異なる ID を使用しています。

この行を変更する方法を教えてください

$('div#imageItem' + imgIndex).click(function(){
4

2 に答える 2

0

あなたのセレクター:

$('div#imageItem' + imgIndex)

のときに一度だけ作成されimgIndex=1ます。より一般的なものを作成する必要があります。

$('div[id^=imageItem]').click(function(){
    if ('imageItem'+imgIndex === this.id) {
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    }
});
于 2013-03-15T20:06:34.507 に答える
0

コード行:

$('div#imageItem' + imgIndex).click(function(){

を使用している唯一のコード行のようで、imgIndex一度だけ実行されるため、0forの初期値で一度だけ実行されimgIndexます。

.click()複数回実行する場合は、ハンドラーで再度実行するか、forループを作成して複数の値で複数回実行するか、最初の場所で別のタイプのイベント処理をセットアップする必要がありますイベント ハンドラーは、多くのオブジェクトに対して機能します。

どのパスが最適かを知るには、HTML を見て、達成しようとしていることをさらに理解する必要があります。

複数のオブジェクトのクリック ハンドラーが必要な場合は、共通のクラス名を付けて、次のようにイベント ハンドラーを設定できるようにすることをお勧めします。

$('.imageItemCommon').click(function(){{/* code here */});

または、これらが動的に作成された要素である場合は、委任されたイベント処理を使用します。

$(static parent selector).on('.iamgeItemCommon', 'click', function() {/* code here */});

PSセレクターとしての'div#imageItem0'代わりに使用する理由はありません。'#imageItem0'「div」部分を追加すると、セレクター エンジンの速度が低下するだけであり、ID はドキュメント内で一意であるため、フィルターの一部としては必要ありません。

さて、実際の HTML を表示したので、次の形式のイベント ハンドラーを使用することをお勧めします。これはすべてのスライドで機能するためです (ID は必要ありません)。

// advance to next slide on click
$(".imgItem").click(function() {
    // use $(this) to refer to the currently clicked on slide

});

そして、この種のアニメーションを行うためのより簡単な方法は次のとおりです。

var imgsNum = $(".imgItem").length
var imgWidth = 200;

$(".slideHolder").click(function() {
    var holder = $(this);
    var slideNum = -parseInt(holder.css("left"), 10) / imgWidth;
    if ((slideNum + 1) < imgsNum) {
        holder.animate({left: "-=" + imgWidth + "px"}, 1000);
    } else {
        holder.animate({left: "0"}, 1000);
    }
});

HTML と CSS を使用したデモ: http://jsfiddle.net/jfriend00/AZ7NY/

于 2013-03-15T20:04:42.653 に答える