Question

Q值。我想添加＆＃34; -hvr＆＃34;在img＆＃34; src＆＃34;当我专注于输入类型文本并删除＆＃34; -hvr＆＃34;当场失去焦点时。下面是我正在使用的jQuery代码，但它不起作用：

＆＃13;

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

＆＃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;

Answer 1

如果您希望在用户关注输入时更改src并在用户离开时再次更改，请使用focus和focusout

希望它可以帮到你

＆＃13;

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

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

  });
});

我想添加＆＃34; -hvr＆＃34;在img＆＃34; src＆＃34;使用jquery

2 个答案: