0

どのチェックボックスが選択されているかに基づいて形状を非表示/表示するためにjQueryとRaphaelを使用していますが、.show();/.hide();というfirebugエラーが発生しています。チェックボックス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 に答える