0

写真付きのボタンをドキュメントに追加したい場合は、次のように記述します。

$('#story_pages').append('<div><button value="'+window_value+'" onclick="reload_to_canvas(this.value)" > <img id= "w'+window_value+'", src="../pic/white_img.png", width="110px", height="110px"/> </button></div>');

長すぎてデバッグが困難です。しかし、imgタグを作成してから、ボタンタグとdivタグでラップするにはどうすればよいですか...

jQueryの助けを借りて、明確で簡単な方法を提案してください。

UPDATE : story_pages は jQuery UI ダイアログの ID です。影響があるかどうかはわかりません。

更新: 問題が見つかりました。ボタンと画像の代わりに、ボタンに上記の画像が必要です。

あなたが私に与えるスクリプトは次のようになります：

<div>
<button value="1"></button>
<img ......./>
</div>

img タグは、次のようなボタン タグでラップする必要があります。

<button>
    <img.../>
</button>

そのため、画像はボタンに添付されます。

4

3 に答える 3

2

これはどう：

var $button = $('<button>', {
  value: window_value,
  click: function() { reload_to_canvas(this.value); }
});

var $img = $('<img>', {
  id : 'w'+ window_value,
  src: '../pic/white_img.png'
})
.css({ height: '100px', width: '100px'});

$('#story_pages').append($('<div>').append($button, $img));
于 2013-03-13T06:20:45.297 に答える
1 
$('#story_pages').append(
    $('<div>').append(
        $('<button>', {
            value : window_value
        }).click(function() {
            reload_to_canvas(this.value);
        }).append(
            $('<img>', {
                id : 'w' + window_value,
                src : '../pic/white_img.png'
            }).width(110)
              .height(110)
        )
    )
);
于 2013-03-13T07:12:05.560 に答える
1

文字列がパラメータとして $() に渡されると、jQuery はその文字列が HTML のように見えるかどうか (つまり、 で始まるかどうか) を調べます。そうでない場合、上記で説明したように、文字列はセレクター式として解釈されます。ただし、文字列が HTML スニペットのように見える場合、jQuery は HTML で記述されているとおりに新しい DOM 要素を作成しようとします。次に、これらの要素を参照する jQuery オブジェクトが作成されて返されます。

これを試して

  var div=$('<div>'); // creates new div element

  //updated here
  var img = $('<img />') .attr({   // create new img elementand adds the mentioned attr
                   id:'w'+window_value , 
                   src:"../pic/white_img.png",
                   width:"110px", 
                   height:"110px"});

  var button= $('<button/>',  //creates new button
  {   
    value: window_value,  //add text to button
    click: function(){ reload_to_canvas(this.value)} //and the click event
  }).html(img);   /// and <-- here... pushed the created img to buttons html


 div.append(button); //append button ,img to div
 $('#story_pages').append(div);   //finally appends div to the selector

更新された例のフィドル

于 2013-03-13T06:22:00.073 に答える