2

5つのスパン要素と5つの画像があります。

    <div id="myDiv">
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    </div>

そして私はこのようなボタンを1つ持っています

<button type="button" id="park1">Park</button>

ボタンをクリックすると、span：imgのsrcが変更されます。このために私は使用しています

$("img").attr('src', '\car.jpg');

これは、すべての画像のsrcを置き換えます。しかし、私の要件は、ボタンを初めてクリックした場合、最初のスパンの画像srcのみが変更される必要があるということです。2回目にクリックすると、1回目と2回目の両方が変わるはずです。

これどうやってするの。

4

7 に答える 7

3

次に、クリック数をカウントしないグローバル変数を配置します。

次に使用します 

 <button type="button" id="park1">Park</button>

    <script>
    var count = 0;
     $('#park1').click(function(){
       if(count< $('#myDiv span').length){        
       $("img").eq(count).attr('src', '\car.jpg'); 
      count++;
     }else{
        count=0;
     }
 });    
</script>
于 2013-03-11T06:23:24.083 に答える
3

クリックされた値をグローバル変数にカウントします.....eq（）を使用してsrc属性を変更します..これを試してください

var clickCount=0;
$('#park1').click(function(){  
     if(clickcount < $('#myDiv span').length){  //check the length of span if clickCount is greater make it 0.... so that you get the same effect after 6th click
      $("img").eq(clickCount).attr('src', '\car.jpg'); 
      clickCount++;
     }else{
        clickCount=0;
     }
});
于 2013-03-11T06:24:44.373 に答える
2

以下のようなものを試してください。

<script type="text/javascript">
    var clickCounter = 0;
    $(function()
    {
        $('#park1').on('click',function()
        {

            if(clickCounter >= $('#myDiv span').length)
            {
                clickCounter = 0;
            }
            else
            {
                clickCounter++;
            }
            $("img").eq(clickCounter).attr('src', '\car.jpg');
        });

    });
</script>
<div id="myDiv">
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
</div>

<button type="button" id="park1">Park</button>

私がしたことは.on()、動的にロードされたにイベントを追加できるようにするために使用されDOMます。

2番目と3番目などのイベントが以前の値を使用できるように変数clickCounterとして宣言しました。globalclick

DOMイメージが使用可能かどうかをカウントすると、0に設定されclickCounterます。equalgreater

于 2013-03-11T06:26:11.817 に答える
1

これで試してみてください：

$('#park1').click(function () {
    $('img[src$="car.jpg"]').first().attr('src', '\car.jpg');
});

このフィドルをチェックアウト

于 2013-03-11T06:30:43.997 に答える
1

これは機能するはずです：

var clickCount=0;

(function() {

$("park1").click(function() {
$("myDiv").find("img").eq(clickCount).attr('src','/car.jpg');
clickCount++;    
});

});
于 2013-03-11T06:40:36.700 に答える
1

CSS 

.NewImage
{
content:url("\car.jpg");
}

コード

   $(span).each(function(){

    if ($(this img).hasClass('NewImage') == false)
       {
         $(this img).addclass('NewImage')
         return false;
       }

    });
于 2013-03-11T06:43:36.567 に答える
0

jqueryを使用している場合はfirst（）;を使用します。

于 2013-03-11T06:25:38.027 に答える