jqueryを使用してimg "src"属性の末尾に "-hvr"を追加します

Question

Q.入力タイプのテキストに注目してimg "src"属性の最後に "-hvr"を追加して削除しますフィールドにフォーカスがないときは "-hvr"あなたは、ユーザーが入力を集中し、彼が去るとき、再びそれを変更する変更srcをしたい場合は、使用focus

$('.signup-fld > input').click(function() { 
 
    var imgAttr = $(this).parent().find('img').attr('src').replace(/\.jpg/, '-hvr.jpg'); 
 
    $(this).attr("src", imgAttr); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="signup-fld"> 
 
    <img src="img/user-form-ico.jpg" /> 
 
    <input type="text" placeholder="Full name" /> 
 
</div> 
 
<div class="signup-fld"> 
 
    <img src="img/pass-form-ico.jpg" /> 
 
    <input type="text" placeholder="Full name" /> 
 
</div>

Answer 1

と：以下は、私が使用してますが、その動作していないのですjQueryのコードですfocusout

は、それはあなたに

$('.signup-fld > input').focus(function() { 
 
    var img = $(this).prev("img"); 
 
    var imgAttr = $(img).attr("src").replace(/\.jpg/, '-hvr.jpg'); 
 
    $(img).attr("src", imgAttr) 
 
    console.log($(img).attr("src")) 
 
}).focusout(function() { 
 
    var img = $(this).prev("img"); 
 
    var imgAttr = $(img).attr("src").replace(/\-hvr.jpg/, '.jpg'); 
 
    $(img).attr("src", imgAttr) 
 
    console.log($(img).attr("src")) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="signup-fld"> <img src="img/user-form-ico.jpg" /> 
 
    <input type="text" placeholder="Full name" /> 
 
</div> 
 
<div class="signup-fld"> <img src="img/pass-form-ico.jpg" /> 
 
    <input type="text" placeholder="Full name" /> 
 
</div>

を役に立てば幸い

Answer 2

あなたがイメージからsrcを取得しますが、

あなたはこのも

$('.signup-fld > input').on('focus blur', function(event) { 

    $(this).parent().find('img').attr('src', function(_, existingSrc) { 
    if(event.type === 'focus'){ 
     return existingSrc.replace(/\.jpg/, '-hvr.jpg'); 
    }else{ 
     return existingSrc.replace('-hvr', ''); 
    } 

    }); 
});