JavaScript内のIMG HTMLタグ

Question

imgソースをjs変数 'c​​ontent：'に渡すためにjavascriptにIMG srcタグを追加して、 '$ html：'というPHP変数に渡します。 私は試みましたが、私はエラー '不明なオブジェクト'のエラーが表示されます。この場合、javascriptにimgタグを追加する方法はありますか？ PHPは、ページのロード前に発生し、JSは、後に発生し、これはAJAXを経由して行うことができるか、リロードした場合ので

$html .= ' 
    <script type="text/javascript"> 
    $(".example-p-1").on("click", function() { 
     $.alert({ 
      title: "You drawer is complete", 
      content: "<div style="text-align:center"><img style="width:80px;height:80px" src="https://thedailyoutfits.com/wp-content/draw.jpg"><br></div>", 
     }); 
    }); 
    </script>'; 

Answer 1

あなたはjQueryの$(this).attr("src")を使用してIMG srcを取得することができます

あなたは、PHPの中にJSを渡すことはできませんページ。

更新日： 文字列内のすべての二重引用符を一重引用符で置き換えます。これは、外側の文字列が二重引用符を使用するため、基本的には常に開閉されるため、一重引用符を使用することは単一の文字列として使用されることを意味します。

Answer 2

二重引用符は二重引用符で囲まれています。一重引用符に置き換えてエスケープします。

$html .= '<script type="text/javascript"> 

    $(".example-p-1").on("click", function() { 
     $.alert({ 
      title: "You drawer is complete", 
      content: \'<div style="text-align:center"><img style="width:80px;height:80px" src="https://thedailyoutfits.com/wp-content/draw.jpg"><br></div>\', 
     }); 

    }); 
</script>"; 

---

良い代替がHEREDOCS

$html .= <<< JS 
    <script type="text/javascript"> 
     $(".example-p-1").on("click", function() { 
      $.alert({ 
       title: "You drawer is complete", 
       content: '<div style="text-align:center"><img style="width:80px;height:80px" src="https://thedailyoutfits.com/wp-content/draw.jpg"><br></div>', 
      }); 
     }); 
    </script> 
JS;// Do not indent this ending tag. 

<<< JSである限り、それはJS;

Answer 3

と一致するよう、あなたのファイルに次のコードを使用しようと、それは動作しますしてください任意のテキストことができます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script> 
    <?php 

$html = ""; 
$html .= '<script type="text/javascript"> 

    jQuery(".example-p-1").on("click", function() { 
        jQuery.alert({ 
         title: "You drawer is complete", 
         content: "<div style=text-align:center><img style=width:80px;height:80px; src=https://thedailyoutfits.com/wp-content/draw.jpg><br></div>", 

        }); 

       }); 


     </script>'; 

echo $html; 
     ?>