Question

我一直在搜索论坛寻找答案，但我仍然坚持。

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

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

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

应用程序中的地球仪停止旋转（成功）
按钮上的文字从＆＃39;停止轮播＆＃39;开始轮换＆＃39; （成功）的

这可以通过以下代码行来实现：

$(".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);
}

提前谢谢。

艾伦

Answer 1

由于您同时调用了点击侦听器和该功能，因此我将删除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);
    }
}

Answer 2

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

function toggleRotation() {
  var txt = $(".changeText").text();
  if (txt == "Start Rotation")
    startRotation();
  else
    stopRotation();
}

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

Answer 3

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

Onclick更改按钮的名称＆amp;功能

3 个答案: