Question

我正在尝试建立一个网页，您可以在那里购买电影院的票。我使用算法根据现场的ID改变电影院的价格。问题是，当我更改图像的src时，我得到一个未定义的id。为什么我会这样做，以及如何解决它？这是代码：

window.onload = main;
var initialPrice = 0;
var dayMultiplier = 1;
var price = 0;
function main()
{
    addButtonLsn();
}

function addButtonLsn()
{
    $("#setDate").click(addSeats);  
}

function addSeats()
{
    if($("#zi").val() === "--*--")
    {
        alert("Day select missing");
        return; 
    }

    if($("#movies").val() ==="--*--")
    {
        alert("Movie select missing");
        return; 
    }
    setInitialPrice();
    setDayMutliplier();
    $("#sala").empty();
    $("#price").html("Pret : 0");
    var myId = 1;
    for(var i = 0; i < 20; i++)
    {
        for (var j = 0; j < 12; j++)
        {
            var s = document.createElement("img");  
            s.setAttribute("src", "liber.jpg");
            s.setAttribute("id", myId);
            myId ++;
            s.addEventListener("click", changeSeat);
            s.addEventListener("mouseover", getSeatTicket);
            var d = document.getElementById("sala");
            d.appendChild(s);
        }   
    }
}

function getSeatTicket()
{
    var spotPrice = initialPrice;
    spotPrice = initialPrice * dayMultiplier;
    var spotMultiplyer = 1;
    var ct = 1;
    if($(this).attr("id") < 130)
    {
        spotMultiplyer = 1;
        ct = 3;
    }
    else if ($(this).attr("id") < 180)
    {
        spotMultiplyer = 1.1;
        ct = 2;
    }
    else
    {
        spotMultiplyer = 1.2;
        ct = 1;
    }

    spotPrice *= spotMultiplyer;
    console.log($(this).attr("id"));//undefined
    $(this).attr("title","Categorie: " + ct + " ,pret " + spotPrice);
    return spotPrice;
}

function changeSeat()
{
    if($(this).attr('src') === "liber.jpg")
    {
        $(this).attr('src','rezervat.jpg');
        price = price + getSeatTicket();
        $("#price").html("Price: " + price);
    }
    else
    {
        $(this).attr('src','liber.jpg');
        price = price - getSeatTicket();
        $("#price").html("Price: " + price);
    }
}

function setInitialPrice()
{
    if($("#movies").val() === "The Gold Rush")
    {
        initialPrice = 10;
        return; 
    }   
    if($("#movies").val() === "The Kid")
    {
        initialPrice = 11;  
        return;
    }   

    if($("#movies").val() === "Modern Times")
    {
        initialPrice = 12;
        return; 
    }   
}

function setDayMutliplier()
{
    if($("#zi").val() === "Luni-Joi")
    {
        dayMultiplier = 1;
        return; 
    }
    if($("#zi").val() === "Vineri")
    {
        dayMultiplier = 1.1;    
        return; 
    }
    if($("#zi").val() === "Sambata")
    {
        dayMultiplier = 1.2;    
        return; 
    }
    if($("#zi").val() === "Duminica")
    {
        dayMultiplier = 1.3;
        return;     
    }
}

Answer 1

函数getSeatTicket将this称为当前元素，当函数用作鼠标悬停侦听器的回调时，它可以正常工作，但当您将其作为回调时，它将无法正常工作你在changeSeat。

也许您应该使用.call(this)来使用与changeSeat相同的范围来运行该功能;

function changeSeat()
{
    if($(this).attr('src') === "liber.jpg")
    {
        $(this).attr('src','rezervat.jpg');
        price = price + getSeatTicket.call(this);
        $("#price").html("Price: " + price);
    }
    else
    {
        $(this).attr('src','liber.jpg');
        price = price - getSeatTicket.call(this);
        $("#price").html("Price: " + price);
    }
}

Answer 2

在代码检查之后，我的猜测是当你尝试在getSeatTicket（）函数中访问元素的id时，你正在调用一个函数，其中$（this）实际上并没有引用到哪个DOM元素该事件附于。

为了解决这个问题，我的建议是将id传递给getSeatTicket（）函数，并获取对其中元素的引用。像（概念）那样的东西：

function getSeatTicket(id){
    var element = $(id);

    ...
}

并称之为：

...

 $(this).attr('src','rezervat.jpg');
 price = price + getSeatTicket($(this).attr("id"));
...

最佳。

更改src时img丢失id

2 个答案: