Question

我有问题，我第一次点击它时必须单击两次以交换按钮文本和类。所有其他时间它在第一次点击时改变。我已经尝试删除clickUnits（）函数中的click，但在这种情况下，我可以更改为Celcius一次，不能再交换值。我正在分配价值和课程，因为我稍后会在另一个api通话中使用它来检索指定单位的天气。有谁看到我做错了什么？

HTML

<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button>

javascript

     function changeUnits() {
       if($("#units").hasClass("Fahrenheit")) {

           $(".Fahrenheit").click(function() {
                $(".Fahrenheit").text("C");
                $(this).removeClass('Fahrenheit').addClass('Celcius');
            });
        }
         else if($("#units").hasClass("Celcius")) {
            $(".Celcius").click(function() {
                $(".Celcius").text("F");
                $(this).removeClass('Celcius').addClass('Fahrenheit');
            });
         }          
        }

Answer 1

试试这个..无需检查您只需要class Bullet(Sprite): def __init__(self, ai_settings, screen, ship): print('DEBUG:', 'ai_settings', ai_settings) # OUTPUT DEBUG: ai_settings <Ship object at 0xxxx> # That doesn't seem right! It should be a `<Settings object at 0xxxx>`的课程，只需检查toggleClass()即可将文字更改为C或F

.text()

并使用它function changeUnits(el) { // pass el here var ThisText = $(el).text(), // get text from this element fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C'; // set fah_or_ce as a variable and check if C return F and if else return C $(el).text(fah_or_ce ); // change text with new text $(el).toggleClass('Fahrenheit Celcius'); // toggle between classes }

演示1

＆＃13;

onclick = "changeUnits(this)"

＆＃13;

function changeUnits(el) {
   var ThisText = $(el).text(),
       fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C';
   $(el).text(fah_or_ce );    
   $(el).toggleClass('Fahrenheit Celcius');
}

＆＃13;

对我而言，我更喜欢使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="units" class="Fahrenheit" onclick="changeUnits(this)">F</button>事件而不是内联.on(click)

演示2

＆＃13;

onclick

＆＃13;

$(document).ready(function(){
    $('#units').on('click' , function(){
        changeUnits(this);
        // you can use callWeather() as well
        //callWeather();
    });
});

function changeUnits(el) {
   var ThisText = $(el).text(),
       fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C';
   $(el).text(fah_or_ce );    
   $(el).toggleClass('Fahrenheit Celcius');
}

＆＃13;

Answer 2

我不明白为什么只在单击按钮时才使用函数changeUnits。对我来说，$("#units")更改课程时应该更多。但是最好为你使用这个代码：

<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button>
<button id="units" class="Celsius" onclick="changeUnits();callWeather()" style="display: none;">C</button>



function changeUnits() {
    if($("#units").hasClass("Fahrenheit")) {
        $(".Fahrenheit").hide();
        $(".Celcius").show();
    }else if($("#units").hasClass("Celcius")) {
        $(".Fahrenheit").show();
        $(".Celcius").hide();
    }          
}

Answer 3

你去了：

<强>解释

你的问题非常简单，你必须按两次这一事实是因为一旦你点击，你真正做交换的功能就会受到影响，一个简单的想法是在文档加载时分配你的功能

工作代码，与您的代码非常相似：

＆＃13;

function initialize()
        {
            if($("#units").hasClass("Fahrenheit")) 
            {

                $(".Fahrenheit").click(function() 
                {
                    $(".Fahrenheit").text("C");
                    $(this).removeClass("Fahrenheit").addClass("Celcius");
                    $(this).click(initialize());
                });
            }
            else if($("#units").hasClass("Celcius"))
            {
                $(".Celcius").click(function() 
                {
                    $(".Celcius").text("F");
                    $(this).removeClass("Celcius").addClass("Fahrenheit");
                    $(this).click(initialize());
                });
            }
        }

＆＃13;

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
<body onload="initialize()">
<button id="units" class="Fahrenheit">F</button>
</body>
</html>

＆＃13;

必须单击两次才能执行onclick

3 个答案: