0

以下は、Javascript で画像を追加するコードです。

function AddFirstRow() {
    //Create an input type dynamically.
    var element ;
    var seatArr = document.getElementById("seatArr");

    //Assign different attributes to the element.
    var  rowCounter ;
    for( rowCounter = 1 ; rowCounter < 8 ; rowCounter++ ){
        element = document.createElement("input");
        element.setAttribute("type", "image");
        element.setAttribute("src","../Images/available_seat_img.png") ;
        element.setAttribute("class", "seatRightMostRow1");
        element.setAttribute("id", "1V");
        seatArr.appendChild(element);
    }
}

画像が追加される本文要素。

<div class="seatArr">        
    <span id="seatArr" >&nbsp;</span> 
    <input type="image" class="seatRightMostRow1" id="1A" alt="sfdsf" src="../Images/available_seat_img.png"  />
    <input type="image" class="seatRightMostRow2" id="1B" alt="sfdsf" src="../Images/available_seat_img.png"  />
</div>

画像の toggel 機能の JQuery。

$("input[id]").toggle(function(){
    $(this).attr("src","../Images/selected_seat_img.png");
},function(){
    $(this).attr("src","../Images/available_seat_img.png");
});
4

1 に答える 1

0

これは、配線する順序によって異なります。

toggleハンドラーを接続する前に画像が挿入されていることを確認すると、すべての画像に対してトグルが機能します。

$(function(){
  AddFirstRow();
});

$("input[id]").toggle(function(){
  $(this).attr("src","../Images/selected_seat_img.png");
},function(){
  $(this).attr("src","../Images/available_seat_img.png");
});

AddFirstRowが配線された後に呼び出しが発生するように移動すると、toggle実際には最初のイメージに対してのみトリガーされます。

フィドル: http://jsfiddle.net/frankvanpuffelen/HPPKv/1/

通常、jQuery を使用onして、動的要素でもトリガーされるハンドラーを設定できますが、それが でどのように機能するかはわかりませんtoggle。私が確認しておきます、チェックします。

アップデート

このコードは、このon関数を使用して、動的要素に対してハンドラーが確実に起動するようにします。

$(".seatArr").on('click', 'input', function(){
  $(this).attr("src",
    $(this).attr("src") == "../Images/selected_seat_img.png"
    ? "../Images/available_seat_img.png"
    : "../Images/selected_seat_img.png"
  );
});
于 2012-12-30T13:13:21.750 に答える