0

我使用 jQuery 和 Raphael 根据选中的复选框隐藏/显示形状，但我收到一个 .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/

4

2 回答 2

5

在您的代码中：

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/

于 2013-04-12T13:26:52.593 回答
1

如前所述，shapeId是一个字符串。您需要将其映射到您希望显示的对象。我看到 ID 与您的变量名称相同。我建议您以这种方式进行映射：

var p = Raphael("test");
var shapes = {};

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

var circle = shapes['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')) {
    shapes[shapeId].show();
} else {
    shapes[shapeId].hide();
}
});
于 2013-04-12T13:32:07.663 回答