Question

以下是在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>

JQuery for toggel功能在图像上。

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

Answer 1

这取决于您连线的顺序。

如果我确保在连接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"
  );
});

当使用Jquery中的切换功能时，动态添加的图像未在页面上添加

1 个答案: