Question

这可能是一个愚蠢的问题，但我只是开始学习，所以请耐心等待... ...为什么这个文字切换不起作用？

$(document).ready(function(){ 
  textSwap();
  $("#showHi").on("click", textSwap);
  $("#showBye").on("click", textSwap);
});
var isHi = false; 
function textSwap() {  
  if (isHi) {
    $("#text").html("<a href='#' id='showHi'>Bye</a>");
  }
  if (!isHi) {
    $("#text").html("<a href='#' id='showBye'>Hi</a>");
  }
  isHi = !isHi;
}

和

<div id="text">some text</div>

Answer 1

这是因为你用de $（“＃text”）覆盖原始HTML .html ...

尝试

$(document).ready(function(){ 
  textSwap();
});
var isHi = false; 
function textSwap() { 
    console.log(isHi);
  if (isHi) {
    $("#text").html("<a href='#' id='showHi'>Bye</a>");
    $("#showHi").on("click", textSwap);
  }
  if (!isHi) {
    $("#text").html("<a href='#' id='showBye'>Hi</a>");
    $("#showBye").on("click", textSwap);  
  }
  isHi = !isHi;
}

另一种简单的方法： https://jsfiddle.net/07enc391/

Answer 2

由于jQuery中没有 .live （或者它已经弃用不是100％肯定），你必须以这种方式使用 .on 并且它将起作用

$("body").on("click", "#showHi", textSwap);
$("body").on("click", "#showBye", textSwap);

Answer 3

$(document).ready(function(){ 
  textSwap();
  var isHi = false;
  $("#showHi").on("click", textSwap);
  $("#showBye").on("click", textSwap);
});
function textSwap() {  
  if (isHi) {
    $("#text").html("<button id='showHi'>Bye</button>");
  }
  else{
    $("#text").html("<button id='showBye'>Hi</button>");
  }
  isHi = !isHi;
}

jquery文本切换onclick

3 个答案: