KineticJS удаление и добавление слоев

Question

Я чувствую, что я невероятно глуп, но по какой-то причине я не могу решить эту проблему.

Я хочу 3 отдельных слоя, каждый из которых может иметь несколько объектов/фигур на них, а затем на клик. Я хочу, чтобы видимый слой был удален или спрятан, и появился следующий слой.

Я думаю, что моя проблема умирает в логике и вызывает функцию. Вот функция и jsfiddle:

var version = 0;  
function layerVersion() { 
    if (version === 1) { 
    stage.add(layerBlue); 
    layerBlue.on('click', function() { 
     layerOrange.hide; 
     version = 2; 
    }); 
    } else if (version === 2) { 
    stage.add(layerOrange); 
    } else { 
    stage.add(layerPink); 
    layerpink.on('click', function() { 
     layerPink.hide; 
     version = 1; 
    }); 
    } 
} 

Вот ссылка jsFiddle: http://jsfiddle.net/TJ96r/2/

Любая помощь будет очень признателен, я чувствую себя настолько глуп, что не в состоянии понять это.

Answer 1

Проверьте это. http://jsfiddle.net/TJ96r/3/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 300, 
    height: 300 
}); 
var layerPink = new Kinetic.Layer(); 
layerPink.hide(); 
var layerBlue = new Kinetic.Layer(); 
var layerOrange = new Kinetic.Layer(); 
layerOrange.hide(); 

    // pink box 
    var pink = new Kinetic.Rect({ 
    x: 50, 
    y: 50, 
    width: 100, 
    height: 100, 
    fill: 'pink', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 
    // blue box 
    var blue = new Kinetic.Rect({ 
    x: 100, 
    y: 100, 
    width: 100, 
    height: 100, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 
    // orange box 
    var orange = new Kinetic.Rect({ 
    x: 150, 
    y: 150, 
    width: 100, 
    height: 100, 
    fill: 'orange', 
    stroke: 'black', 
    strokeWidth: 2 
    }); 

    layerPink.add(pink); 
    layerBlue.add(blue); 
    layerOrange.add(orange); 

    var version = 0; 
     stage.add(layerBlue); 
     stage.add(layerOrange); 
     stage.add(layerPink); 

layerBlue.on('click', function() { 
     layerBlue.hide(); 
     layerOrange.show(); 
     layerPink.hide(); 
    stage.draw(); 
     }); 
layerOrange.on('click', function() { 
     layerBlue.hide(); 
     layerOrange.hide(); 
     layerPink.show(); 
    stage.draw(); 
     }); 
layerPink.on('click', function() { 
     layerPink.hide(); 
     layerOrange.hide(); 
     layerBlue.show(); 
    stage.draw(); 
     });