Question

我正在尝试编写一些jQuery，每次点击天气div时都会将温度切换到华氏温度和摄氏温度之间。这是我初次点击的内容：

$('#weather').on('click', function() {
            // $('#author').hide('fast')
            $('#weather').empty();
            $('#weather').append(`
            <h2>Weather</h2>
            <h4>${weather.name}</h4>
            <h3>${Math.round(weather.main.temp - 273.15)} &#176C</h3>
            <h5>${weather.weather[0].description}</h5>
        `)

有关如何在初次点击后切换回华氏温度的任何见解？

谢谢！

Answer 1

可以在元素上切换一个类并检查该类

$('#weather').on('click', function() {
     var $elem = $(this).empty(),
         isCelsius = $elem.hasClass('celsius');
     $elem.toggleClass('celsius');

     var value = isCelsius ? /* calc Fahrenheit */ : /*calc celsius*/;
    ....

Answer 2

你可以做这样简单的事情：在页面上同时切换它们。

$('.fahrenheit').hide();
$('.celsius, .fahrenheit').on('click', function()  {
  $('.celsius, .fahrenheit').toggle()
});

.celsius{
    height:100px;
    width:100px;
    background:#eee;
    float:left;    
}

.fahrenheit{
    height:100px;
    width:100px;
    background:#fdcb05;
    float:left;     
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="celsius">
    <p> xy Celsius </p>
</div>
<div class="fahrenheit" >
    <p> zw Fahrenheit  </p>
</div>

反转jquery点击每次点击

2 个答案: