1

これがすでに尋ねられている場合は申し訳ありませんが、私が必要とする正確な解決策を見つけることができません。

私はjqueryの初心者で、新聞のレイアウトフォームを作成しています。このコードを使用すると、レイアウトキャンバス内に問題なく新しいdivを作成できます

function makeSplashBlockdiv() {
    $("#canvas").append('<div class="SplashBlock" class="bar">Splash Block 700X250</div>')
    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    })
}​

サイズとクラス名が異なる他のdivがあります。プログラムは同じタイプの複数のdivを作成できるため、idを使用していません。

これらのすべてのdivは、と呼ばれるdivに配置され#canvasます。

マウスでdivを選択して削除できるようにする必要があります。これは、このコードでどのdivが存在するかを見つけるために最も近いものですが、何も起こりません。

$("#canvas").click(function(event) {
    $("#log").html("clicked: " + event.target.className);

クリックハンドラーがあるはずですが、この部分を理解できていません。

どんな助けでも大歓迎です。

4

3 に答える 3

0

クリックイベントを、それらを保持するキャンバスではなく、divのクラスにバインドします。

例えば

$(".divclass").click(function(){});

そうすれば$(this)、クリックしたdivにアクセスして、削除するだけで済みます。

例えば

$(".divclass").click(function(){
   $(this).remove()
});
于 2012-12-03T21:20:27.167 に答える
0

あなたのためのいくつかのオプション：

1）closest使用event.target：

$("#canvas").click(function(event) {
    var theDiv = $(event.target).closest('div');
    // ...
});

これにより、マウスがクリックされたdivが見つかります。closestセット内の要素から開始し、セレクターに一致する最初の要素を見つけ、必要に応じて親要素を処理します。

click2）または、次の方法でイベント委任を明示的に使用するようにハンドラーを変更することで、jQueryにそれを実行させることもできますdelegate。

$("#canvas").delegate("div", "click", function(event) {
    var theDiv = $(this);
    // ...
});

jQueryの新しいバージョンでは、代わりに使用できますon（引数の順序が変更されていることに注意してください）。

$("#canvas").on("click", "div", function(event) {
    var theDiv = $(this);
    // ...
});

...個人的にはの明快さを好みますがdelegate。

于 2012-12-03T21:23:13.590 に答える
0

selected以下は、クリックされたすべてのdivにクラスを追加します。

function makeSplashBlockdiv() {
    var $myNewDiv = $('<div class="SplashBlock" class="bar">Splash Block 700X250</div>');

    $myNewDiv.click(function () {
        $(this).addClass("selected");
    });

    $("#canvas").append($myNewDiv);

    $(".SplashBlock").draggable({
        containment: "#canvas",
        scroll: false,
        grid: [10, 10]
    }, {
        cursor: "move",
        cursorAt: {
            top: 125,
            left: 350
        }
    });
}​

次に、を使用して、選択したすべてのdivを操作できます$("#canvas .selected")。

于 2012-12-03T21:25:41.000 に答える