jQueryで要素・属性を消す(onclickとかtargetとか)


  • 公開:
  • 更新:
  • 編集:
概要 ▶ とあるWeb用のCMSを使用しています(Movable Typeではない)。そのCMSで画像を登録すると、自動的に画像のサムネイルができて、配置するとサムネイルからリンクが元画像張られるようになっています。結構便利だな~なんて思っていたのですが、そのリンクはウインドウが開いて元画像が表示されるようになっていたので、いわゆるlightboxのようなサムネイル画像をクリックすると画面が暗転して画像を拡
20110707-jQuery-00

とあるWeb用のCMSを使用しています(Movable Typeではない)。


そのCMSで画像を登録すると、自動的に画像のサムネイルができて、配置するとサムネイルからリンクが元画像張られるようになっています。

結構便利だな~なんて思っていたのですが、そのリンクはウインドウが開いて元画像が表示されるようになっていたので、いわゆるlightboxのようなサムネイル画像をクリックすると画面が暗転して画像を拡大表示みたいなスクリプトを走らせると干渉してうまく動作しなかったりします。
(具体的に言えば、jQuery+yuga.js+thickbox.js)



CMS側でリンク要素に強制的にonclick属性・target属性が付いていたので、それを何とかできないかな~と思って考えたら「後で消せばいいんでは…」と気がついて勢いjQueryで書いてみました。



書いてみた結果

こんな感じ。


<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".sample .body ul li a").removeAttr("onclick").removeAttr("target");
});
</script>


jQueryの命令で「removeAttr("なんとか")」は、連結している要素の「なんとか」属性をremove(削除)するものです。
今回は「onclick」属性と「target」属性を消したかったので命令を連結して実行しています。



実際に実行する時はjQueryのサイトでjQueryのスクリプトをダウンロードしてあらかじめロードして置いて下さいね。

20110707-jQuery-01


実行例

<a href="aaa.jpg" onclick="wopen();" target="viewer">


に対して先ほどのjQueryを実行すれば「onclick="wopen();"」「target="viewer"」が削除されて


<a href="aaa.jpg">


だけになります。あら簡単。


めでたしめでたしv( ̄∇ ̄)v



P.S.

使っているCMSのフォーラムでonclick属性とtarget属性はつけないで出力できないの?と質問を書いたら、画像の設定でrel属性を設定すればつかなくなるらしい…うーむ。

結果的には解決したがなんか納得いかないΣ(`□´/)/


なお、「jQuery(~)」と書いていますが普通は「$(~)」で問題ないです。
カテゴリー:

このページをぜひシェアしてください