Onclick更改按钮的名称和功能

Onclick changes button's name & function

本文关键字：功能 按钮 Onclick      更新时间：2023-09-26

我一直在论坛上寻找答案，但我仍然卡住了。

我创建了一个按钮，其中包含指向 stopRotation（） 函数的 onclick 属性。

<button type="button" class="changeText" onclick="stopRotation();">Stop Rotation</button>

单击它后，将发生以下情况：

  1. 应用程序中的地球停止旋转（成功）
  2. 按钮上的文本从"停止旋转"更改为"开始旋转"（成功）

这是通过以下代码行实现的：

$(".changeText").click(function () {
    $(this).text(function(i, v){
        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});
var lastNow = Date.now();
function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}    
function stopRotation(){
    viewer.clock.onTick.removeEventListener(rotation);
}

现在按钮的文本设置为"开始旋转"，如何调用该函数，以便在用户单击按钮后地球再次开始旋转？

function startRotation(){
    viewer.clock.onTick.addEventListener(rotation);
}

提前谢谢你。

艾伦

由于您同时调用了单击侦听器和函数，因此我将删除onclick调用并将所有逻辑移动到单击侦听器。

$(".changeText").click(function () {
    $(this).text(function(i, v){
        if (v === 'Start Rotation')
           viewer.clock.onTick.addEventListener(rotation);
        else 
           viewer.clock.onTick.removeEventListener(rotation);
        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});
var lastNow = Date.now();
function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}

而不是直接调用方法使用ToggleRotation。

function toggleRotation() {
  var txt = $(".changeText").text();
  if (txt == "Start Rotation")
    startRotation();
  else
    stopRotation();
}
<button type="button" class="changeText" onclick="ToggleRotation();">Stop Rotation</button>

$(".changeText").click(function () {
    $(this).text(function(i, v){
        if (v === 'Start Rotation'){
            startRotation();
            return 'Stop Rotation';
        }
        return 'Start Rotation';
    });
});
相关文章：