Question

我有一张表格，上面有关于每张图片的图片和信息。在每个图像旁边，我有一个“添加”按钮，单击该按钮会打开一个id =“alignment”的jquery对话框（）。我想发送一个php变量（带有图像名称），所以当你点击“添加”按钮时我可以调用变量，图像名称可以显示在对话框中。我的代码是：

  foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');  
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>'); 
  }
$wgOut->addScript('<script type="text/javascript"> 

    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Image",
                //draggable: false,
                resizable: false,
                buttons: {"Okay": function()      {$(this).dialog("close");}},

        });

        $(".imageSetting")
            .click(function() {
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );

</script>'); 

$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');

Answer 1

因此我在您的示例中添加了一些代码，但您可以根据需要进行调整。基本上我建议使用jQuery .data()方法传递您需要的数据。每个按钮都将利用循环内的HTML5数据属性来创建图像名称，作为按钮html的一部分。

接下来，当您点击按钮时，它会获取该值并将其分配给模态的image-name副本。

我为你的模态添加了一个open函数。在该函数内部，它将获取该图像名称值（我们刚刚指定的值），您现在可以使用它来附加到模态的内容中。（例如，您可以在模式html中的某处创建一个<span>，您可以在其中放置图像名称...然后使用.html()方法将值“粘贴”在其中

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button data-image-name="' . $upload[0] . '" class="imageSetting">Add</button></td><td>');  
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>'); 
  }
$wgOut->addScript('<script type="text/javascript"> 

    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Image",
                //draggable: false,
                resizable: false,
                open: function() {
                    var imageName = $("#alignment").data("image-name");
                    // use the jQuery .html() function to put the value of 'imageName'
                    // into your dialog contents. (like #modal-subheader.html(imageName);)
                },
                buttons: {"Okay": function()      {$(this).dialog("close");}},

        });

        $(".imageSetting")
            .click(function() {
            $("alignment").data("image-name", $(this).data("image-name"));
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );

</script>'); 

$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');

在jquery对话框中发送一个php变量（）

1 个答案: