0

私はこのようなコードを持っています

 var cross=  '<img src="./img/cross.png"height="25px" width="25px" style="float: right; 
                              vertical-align: top"' + 'onclick="alert('+1+');">';

img は正しく表示されますが、アラートは機能しません。また、引用符の多いコードを書く際のコツや、他に実装方法があれば教えていただきたいです。

4

2 に答える 2

0

おい、これにはあまりにも多くの問題があり、どこから始めればいいのかわからない。

<img src="./img/cross.png"height="25px" width="25px" style="float: right; 
                      vertical-align: top"' + 'onclick="alert('+1+');">';
  1. 属性の間にはスペースを入れる必要があります。これが厳密な HTML 仕様の一部であるかどうかはわかりませんが、読みやすさに役立つことは確かです。<img src="..." height="...">
  2. タグの幅と高さ<img>は整数属性であり、CSS ではありません。そう<img width="25" height="25">
  3. 相対パスは現在のディレクトリからのパスと見なされるため、ドットで始まるパスは不要です。まさにsrc="img/cross.png"あなたが望むものです。
  4. 2 つのリテラル文字列を連結するのはなぜですか? 行の長さが手に負えなくなるのを防ぐことが理にかなっている場合もありますが、あなたの場合、引用がわかりづらく、エスケープがさらに難しくなります。
  5. そのonclick部分は、内部に二重引用符が含まれる単一引用符で囲まれた文字列ですが、これは問題ありませんが、文字列は最初の単一引用符で終了します。そのため、onclick="alert(後に+1which が文字列にキャストされonclick="alert(1、最終的な文字列が追加されます (閉じ括弧、セミコロン、二重引用符、右山括弧)。驚くべきことに、これは構文的に有効な JavaScript のようです。

つまり、alertバックスラッシュを使用して、ステートメント内の単一引用符をエスケープします。

于 2013-10-04T03:54:53.453 に答える
0

このコードを試してください

var temp = "+1+";
var cross= "<img src='./img/cross.png' height='25px' width='25px' style='float: right; vertical-align: top' onclick='alert(temp)'">;
于 2013-10-03T21:51:14.807 に答える