Question

我试图创建一个切换按钮，将英寸转换为CM而CM转换为英寸。该按钮首先说明转换为CM，一旦点击它会将当前值从英寸转换为CM，之后按钮会显示转换为英寸，一旦点击将CM转换为英寸：

我不确定下面我做错了什么，但是当它假设先加倍时它似乎是先划分，而按钮不会改变文字第一次：

＆＃13;

var flag=false;
$("#ConvertInchCm").click(function(e){
    e.stopPropagation();
    var val = $('#value').text()
    if(flag && ($(this).text() == "Convert to CM"))
    {
         $("#value").text(val*2.54);
         $(this).text("Convert to Inches"); 
    }
    else
    {
        $("#value").text(val/2.54);
        $(this).text("Convert to CM");
    }
       flag=!flag;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ConvertInchCm">Convert to CM</button>
<div id="value">1</div>

＆＃13;

Answer 1

您不需要旗帜，文字应足以让您知道您所处的状态。您还可以使用this.innerHTML代替$(this).text()来避免创建2 jQuery对象。

＆＃13;

$("#ConvertInchCm").click(function(e){
    e.stopPropagation();
    var val = $('#value').text()
    if(($(this).text() == "Convert to CM"))
    {
         $("#value").text(val*2.54);
         $(this).text("Convert to Inches"); 
    }
    else
    {
        $("#value").text(val/2.54);
        $(this).text("Convert to CM");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ConvertInchCm">Convert to CM</button>
<div id="value">1</div>

＆＃13;

执行计算的简单切换按钮

1 个答案: