Question

我正在尝试创建一个按钮，可以在点击时将文本从千米更改为英里。在阅读其他答案后到目前为止，这是我的代码：

      $("#change").on('click', function(){
      var elem = $(this);
      if (elem.value == "Change to miles") {
       elem.value = "Change to kilometres";
      } else {
        elem.value = "Change to miles";
      }

然而它不起作用，问题似乎是“var elem = $（this）”这一行。我也尝试过getElementById，没有成功。任何人都可以帮我找到这个bug吗？我的HTML代码是：

<input type = "button" id = "change" value = 'Change to miles'> </button>

Answer 1

$("#change").on('click', function() {
      var elem = $(this);
      if (elem.val() == "Change to miles") {
        elem.val("Change to kilometres");
      } else {
        elem.val("Change to miles");
      }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles' />

正确关闭html。
使用.val()设置和获取数据。

Answer 2

你有混合的javascript和jquery。 $(this)是jQuery元素，因此您需要使用.val()方法来获取/设置值。不是.value

如果您想使用.value，则需要使用javascript选择元素实例。像这样的东西：

＆＃13;

$("#change").on('click', function() {
  var elem = document.getElementById("change");
  if (elem.value == "Change to miles") {
    elem.value = "Change to kilometres";
  } else {
    elem.value = "Change to miles";
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles'/>

＆＃13;

我通常使用data attrib来识别元素的状态而不是文本，你也可以这样使用它：

＆＃13;

$("#change").click(function(){
  var elem = $(this);
  if(elem.data("type") === "km"){
    elem.val("Change to kilometers").data("type", "mil");
  } else if(elem.data("type") === "mil"){
    elem.val("Change to miles").data("type", "km");
  } 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "button" id = "change" value = 'Change to miles' data-type="km"/>

＆＃13;

使用jquery点击更改值按钮：如何参考我的代码中的按钮？

2 个答案: