Q值。我想添加" -hvr"在img" src"当我专注于输入类型文本并删除" -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>
&#13;
答案 0 :(得分:0)
如果您希望在用户关注输入时更改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"))
})
&#13;
<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>
&#13;
答案 1 :(得分:0)
您从图像中获取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', '');
}
});
});