Question

我正在尝试创建一个按钮，以便在点击时显示华氏温度，如果再次点击则返回摄氏温度，等等......

这是我到目前为止所拥有的。

          $(".buttonToConvertToF").on("click", function() {

          $(".div3").text(Math.floor(temperature * 9 / 5 + 32) + "º Fahrenheit ");
          $(".div3").append("<i class='wi wi-" + dayOrNight + "-" + icon[weatherIconId].icon + "'></>");

          $(".div4").html("<button class='buttonToConvertToC btn btn-dark'>Convert to Celsius!</button>");




        });

        $(".buttonToConvertToC").on("click", function() {

          $(".div3").text(Math.floor(temperature) + "º Celsius ");
          $(".div3").append("<i class='wi wi-" + dayOrNight + "-" + icon[weatherIconId].icon + "'></>");

          $(".div4").html("<button class='buttonToConvertToF btn btn-outline-dark'>Convert to Fahrenheit!</button>");



        });

Answer 1

您需要使用事件委派。使用您的方法，jQuery会在第一次执行时将事件绑定到.buttonToConvertToF和.buttonToConvertToF，但不会在动态生成的元素上监听事件（就像您的情况一样）。

尝试以下事件委派实现：

// Delegate the event
$(document).on("click", ".buttonToConvertToF, .buttonToConvertToC", function() {

    // If the clicked element id ".buttonToConvertToF"
    if($(this).hasClass("buttonToConvertToF") {

        $(".div3").text(Math.floor(temperature * 9 / 5 + 32) + "º Fahrenheit ");
        $(".div3").append("<i class='wi wi-" + dayOrNight + "-" + icon[weatherIconId].icon + "'></>");
        $(".div4").html("<button class='buttonToConvertToC btn btn-dark'>Convert to Celsius!</button>");

    } else { // The other button

        $(".div3").text(Math.floor(temperature) + "º Celsius ");
        $(".div3").append("<i class='wi wi-" + dayOrNight + "-" + icon[weatherIconId].icon + "'></>");
        $(".div4").html("<button class='buttonToConvertToF btn btn-outline-dark'>Convert to Fahrenheit!</button>");

    }

});

需要按钮从值a返回前进到值b，反之亦然

1 个答案: