Question

我正在尝试对我在那里找到的一些预先存在的代码进行逆向工程，并且遇到了麻烦。

我想要一个按钮改变说＆＃34; Skip＆＃34;到＆＃34;输入＆＃34;一旦用户将光标单击到其旁边的表单字段中。因此，在第一次观看时，他们会看到＆＃34; Skip＆＃34;但是一旦他们开始输入，按钮就会改为＆＃34;输入＆＃34;

<input type="text" id="visitor-name-input" placeholder="what's your name?">
<a id="skip-btn" href="#"><img src="skipbtn.png" height="50px"/></a>
<a id="enter-btn" href="#"><img src="enterbtn.png" height="50px" /></a>

所以我想知道什么样的jQuery会导致根据点击skip-btn时换出enter-btn和visitor-name-input？某种切换？

Answer 1

当用户点击文本框

时，您可以使用focus()方法

HTML（更改为不用担心图片的按钮）

<input type="text" id="visitor-name-input" placeholder="what's your name?">
<button id="skip-btn" href="#">Skip</button>

的jQuery

$( "#visitor-name-input" ).focus(function() {
  $('#skip-btn').text('Enter');
});

JSFIDDLE

为了让您仍然使用您的图片，您只需拥有1个链接并替换内部img src值

$( "#visitor-name-input" ).focus(function() {
  $('#skip-btn img').attr('src', 'enterbtn.png');
});

JSFIDDLE

单击输入字段后交换按钮

1 个答案: