我想使用jquery在img「src」屬性的末尾添加「-hvr」

Question

問：我想在img「src」屬性的末尾添加「-hvr」，當我關注輸入類型文本並刪除當字段沒有對焦時，「-hvr」。下面是我使用jQuery的代碼，但它不工作：

$('.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

如果你想改變的src當用戶集中在輸入並再次更改它當他離開時，使用focus和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，而是試圖將其設置在輸入

您可以使用attr(function)簡化這也

$('.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', ''); 
    } 

    }); 
});