Question

我已经在这个问题上工作了好几天了，并且已经在SO和整个网络上进行了研究，并且无法找到帮助我解决问题的材料。

我正在尝试创建一个天气应用程序，可以切换华氏度和摄氏度之间显示的天气单位。我首先在Fahrenheit中附加天气，然后我创建了一个事件处理程序，它根据该元素当前是否正在显示来有条件地更改相关元素的内部内容＆＃34; F＆＃34;或＆＃34; C＆＃34;。

实际上，我的应用程序成功加载了华氏温度，并在点击时切换到摄氏温度，但它不会切换回华氏温度。我认为事件的注册方式存在一些问题，但对于我的生活，我无法弄明白。

这是我的代码：

var fahr = document.createElement("a");
fahr.attr = ("href", "#");
fahr.className = "tempUnit";
fahr.innerHTML = tempf + "&deg;F" + "<br/>";
$("#currentWeather").append(fahr);

var cels = document.createElement("a");
cels.attr = ("href", "#");
cels.className = "tempUnit";
cels.innerHTML = tempc + "&deg;C" + "<br/>";

var units = document.getElementsByClassName("tempUnit");

$(".tempUnit").click(function() {
    if (units[0].innerHTML.indexOf("F") != -1) {
        $(".tempUnit").replaceWith(cels);
    } else {
        $(".tempUnit").replaceWith(fahr);
    }
})

提前非常感谢！如有必要，很乐意提供更多信息。

Answer 1

目前您正在使用的是 direct 绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

当您使用PO-1 : 122 PO-2 : 123,124时，现有元素将替换为新元素，并且事件处理程序不会附加它们。

您需要使用Event Delegation委托事件方法{。}}来使用.on()。

一般语法

while ((message = myQueueClient.Receive(new TimeSpan(hours: 0, minutes: 0, seconds: 5))) != null)
{
    Console.WriteLine(string.Format("Message received: {0}, {1}, {2}", message.SequenceNumber, message.Label, message.MessageId));
    message.Complete();

    Console.WriteLine("Processing message (sleeping...)");
    Thread.Sleep(1000);
}

示例，也使用replaceWith()，即当前元素上下文，并使用setAttribute()更新$(parentStaticContainer).on('event','selector',callback_function)元素

this

href

$("#currentWeather").on("click", ".tempUnit", function() {
      if (this.innerHTML.indexOf("F") != -1) {
        $(this).replaceWith(cels);
      }
      else {
        $(this).replaceWith(fahr);
      }
})

如何创建动态更改HTML内容的切换按钮？

1 个答案: