jQuery - firebug不是一个函数

Question

我使用jQuery和Raphael来隐藏/显示基于选中的复选框的形状但我得到一个firebug错误.show(); /.hide(); 当我将变量赋值给复选框ID并尝试显示/隐藏时,它们不是函数.但是,当我直接传递形状变量名称并显示/隐藏它有效.

非常感谢第一种方法返回错误或指向教程的任何帮助.谢谢!

jQuery的:

var p = Raphael("test");

var square = p.rect(100, 100, 60, 60);
square.attr('fill', 'orange');
square.hide();

var circle = p.circle(250, 250, 60);
circle.attr('fill', 'yellow');
circle.show();


$("#shapePosition input[type=checkbox]").on('click', function () {
var $this = $(this);
var shapeId = $(this).attr('id');
if ($this.is(':checked')) {
    alert(shapeId);
    square.show(); //This works
    shapeId.show(); //This does not work(Error type: is not a function)
} else {
    shapeId.hide();
}
});

小提琴:

http://jsfiddle.net/adam123/Jw9h5/30/

Answer 1

在你的代码中:

var shapeId = $(this).attr('id');

shapeId是一个字符串对象.字符串对象没有.show()函数.

你可以做的是让你的形状可以从一个对象访问并解决它们如下所示:

var p = Raphael("test");

var shapes = {};

shapes.square = p.rect(100, 100, 60, 60);
shapes.square.attr('fill', 'orange');
shapes.square.hide();

shapes.circle = p.circle(250, 250, 60);
shapes.circle.attr('fill', 'yellow');
shapes.circle.show();

$("#shapePosition input[type=checkbox]").on('click', function () {
    var $this = $(this);
    var shapeId = $(this).attr('id');
    if ($this.is(':checked')) {
        shapes[shapeId].show();
    } else {
        shapes[shapeId].hide();
    }
});

演示:http://jsfiddle.net/Jw9h5/32/