有两个input 两个p,如何点击input对应的p显示出来,js的话我懂写,刚接触jquery,请指教一下
<form>
账号: <input type="text"/>
<p>支持中文、字母、数字,4-20个字符</P>
密码: <input type="password"/>
<p>4-20个字符</P>
</form>
<form>
账号: <input type="text"/>
<p style="display: none;">支持中文、字母、数字,4-20个字符</P>
密码: <input type="password"/>
<p style="display: none;">4-20个字符</P>
</form>
$(function(){
$('input').on('focus',function(){
$(this).next().show();
}).on('blur',function(){
$(this).next().hide();
})
})
$("input").on("click",functioin(){
var index= $(this).index();
$("p").addClass("hidden");
$("p").eq(index).removeClass("hidden");
})
遍历(each)取到input相应的index
jQuery("input").each(function(index,el){
jquery(el).on("click",function(){
jQuery("p").addClass("hidden");
jQuery("p").eq(index).removeClass("hidden");
});
});
$("input").on("click",functioin(){
$("p").hide().eq($(this).index()).show();
})
// 给input提示加了一下className
<form>
账号:
<input class="input-content" type="text" />
<p class="input-tips">支持中文、字母、数字,4-20个字符</P>
密码:
<input class="input-content" type="password" />
<p class="input-tips">4-20个字符</P>
</form>
$('.input-content').on({
focus: function() {
$(this).next('.input-tips:first').show();
},
blur: function() {
$(this).next('.input-tips:first').hide();
}
});
// 题主希望的通过索引实现
$('.input-content').each(function(i, v) {
$(v).on({
focus: function() {
$('form p').eq(i).show();
},
blur: function() {
$('form p').eq(i).hide();
}
});
});