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 的帮助下提出任何清晰简单的方法。

更新：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

如果一个字符串作为参数传递给 $()，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 回答
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 回答