Question

我已经为.html（）元素添加了一个onlick属性，但它没有按预期运行，也没有更改JavaScript值。当点击＆＃34;返回＆＃34;时，它应该回到＆＃34;初始＆＃34;虽然它没有，但我只能在元素之间移动一到三个。

请记住，这是一个复杂的three.js程序的片段，因此是animate（）函数，它被连续调用。

谢谢！

＆＃13;

var currentClicked=-1;
	
animate();
	
function next(input){
  currentClicked=input;
  console.log(currentClicked);
  return text(currentClicked);
}
	
function returnBack(){
  console.log("event catched");
  currentClicked=-1;
  return text(currentClicked);
}
    
function text(currentClicked_){ 
  var back="<h7 id='goBackButton' onclick='returnBack()'>Back.</h7>";
  $(document).ready(function(){
    switch(currentClicked_){
      case -1:
        $(".CurrentText").html(" <p >initial</p> ");
        break;
      case 0:
        $(".CurrentText").html("<p>[01] </p> "+back);
        break;
      case 1:
        $(".CurrentText").html(" <p>[02]<p/>"+back);
        break;
      case 2:
        $(".CurrentText").html("<p>[03] </p>"+back);
        break;
      default:
        $(".CurrentText").html("<p>default </p>"); 
        break;
    }
  });
}
	
	
function animate() {
  //console.log(currentClicked);
  requestAnimationFrame( animate );
  text(currentClicked);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p onclick="next(0)">element one</p>
<p onclick="next(1)">element two</p>
<p onclick="next(2)">element three</p>

<div class="CurrentText"></div>

＆＃13;

Answer 1

每次用户执行某些操作时，重建DOM元素（“后退按钮”）并不是一个好主意。另外，我建议完全拆分js和html，不要通过onclick属性设置处理程序，而是通过.on()。所以我建议采用以下方法：

<p id="e1">element one</p>
<p id="e2">element two</p>
<p id="e3">element three</p>
<p id="back" style="display: none;">back</p>

<div class="CurrentText"></div>

<script>
$(document).ready(function() {

  $('#e1').on('click', function() { next(1); });
  $('#e2').on('click', function() { next(2); });
  $('#e3').on('click', function() { next(3); });
  $('#back').on('click', function() { back(); });

  var current = -1;
  var initial = -1;

  function back() {
    current = initial;
    outputIndex();
    $('#back').hide();
  }

  function next(index) {
    current = index;
    outputIndex();
    $('#back').show();
  }

  function outputIndex() {
    $('.CurrentText').html(current);
  }

  outputIndex(); // or don't call it if you don't want to output initial value on start

});    
</script>

以下是Plunker演示。

Answer 2

你有三个问题：

1-没有名为h7的元素标题仅从h1到h6。

2-你的函数animate在这里被调用（递归函数）

function animate() {
 console.log(currentClicked);
 //requestAnimationFrame( animate );
 text(currentClicked);
}

导致浏览器崩溃。

3-当你处理动态创建的元素时，最好使用body作为选择器，并将事件绑定到你需要的选择器：

$('body').on('click','h6',returnBack)

var currentClicked=-1;
	
animate();
	
function next(input){
  currentClicked=input;
  console.log(currentClicked);
  return text(currentClicked);
}
	
function returnBack(){
  console.log("event catched");
  currentClicked=-1;
  //return text(currentClicked);
}
$('body').on('click','h6',returnBack)
function text(currentClicked_){ 
  var back="<h6 id='goBackButton' >Back.</h6>";
  $(document).ready(function(){
    switch(currentClicked_){
      case -1:
        $(".CurrentText").html(" <p >initial</p> ");
        break;
      case 0:
        $(".CurrentText").html("<p>[01] </p> "+back);
        break;
      case 1:
        $(".CurrentText").html(" <p>[02]<p/>"+back);
        break;
      case 2:
        $(".CurrentText").html("<p>[03] </p>"+back);
        break;
      default:
        $(".CurrentText").html("<p>default </p>"); 
        break;
    }
  });
}
	
	
function animate() {
  console.log(currentClicked);
  //requestAnimationFrame( animate );
  text(currentClicked);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p onclick="next(0)">element one</p>
<p onclick="next(1)">element two</p>
<p onclick="next(2)">element three</p>

<div class="CurrentText"></div>

.html（）元素不会改变javascript值onclick

2 个答案: