jQuery: ボタンをクリック時に画像のURLの一部を書き換える方法
jQuery: ボタンをクリック時に画像のURLの一部を書き換える方法
srcの一部だけ書き換えたい場合は下記のように記述しましょう。
Html
<p class="sp_menu"><img src="/images/common/menu_btn.png" alt="メニューボタン"></p>
JS
$(function(){
$('.sp_menu img').click(function(){
if($(this).attr('src').indexOf('close') !== -1){
var src = $('.sp_menu ').children('img').attr('src').replace('menu_btn_close', 'menu_btn'); //現在のimgからsrcを取得し、一部を書き換える
$('.sp_menu').children('img').attr('src', src); //書き換えたsrcをimgタグに設定する
}else{
var src = $('.sp_menu ').children('img').attr('src').replace('menu_btn', 'menu_btn_close'); //現在のimgからsrcを取得し、一部を書き換える
$('.sp_menu').children('img').attr('src', src); //書き換えたsrcをimgタグに設定する
}
});
});