Kineticjs Show Image Based on a id tag

Question

I am trying to make an interactive plate game demonstrating portion size. I recently came across Kineticjs being able to drag images on a canvas. I have made it where the images are hidden by default but when I add a selector to show images, it will show all images. I set it up where a id is used in the html to call 'show' in the javascript.

1) How would I set this up where it shows the image based on text using an "id" in the html without making several different functions? Does each id need a different tag, like 'showorange'?

    document.getElementById('show').addEventListener('click', function() {
        orangeImg.show();
        strawberryImg.show();
        layer.draw();
    }, false);

http://jsfiddle.net/m9uq7/

Answer 1

A Demo: http://jsfiddle.net/m1erickson/y53v6/

Give each list-item a class="food" and an id specific to the name of the food (id="strawberry).

<ul>
    <li><a href="#" id="papaya" class="food">papaya</a></li>
    <li><a href="#" id="strawberry" class="food">Strawberry</a></li>
</ul>

That way you can ask the browser to listen for all clicks on the food class

$(".food").click(function(){

    // any item with class="food" was clicked
    // so get the id of the clicked link

    var id=$(this).attr("id");

});

Also give each Kinetic.Image an id specific to the name of the food

// strawberry
var strawberryImg = new Kinetic.Image({
    id:"strawberry",
    image: images.strawberry,
    x: 200,
    y: 55,
    width: 128,
    height: 128,
    draggable: true,
    stroke: 'orange',
    strokeWidth: 5,
    strokeEnabled: false,
    visible: false
});

That way you can ask KineticJS to find the Image with the same name as the clicked html link.

For example, if the "strawberry" link was clicked you can get the Kinetic strawberry image like this:

var node=stage.find("#"+$(this).attr("id"));
node.show();
layer.draw();

So you can respond to a click on any class="food" anchor and show the related image:

$(".food").click(function(){
    var node=stage.find("#"+$(this).attr("id"));
    node.show();
    layer.draw();
    console.log($(this).attr("id"));
});