我有一个图像,显示用户一些文本字段(用户名和密码)作为工具提示时,周围。
<div class="user-pos">
<ul id ="users" class="user-list">
<li id="def-html" data-tooltip="#html-content"><img src="img/new.png" /></li>
</ul>
<div id = "html-content" style="display:none;">
<p class="newuser">Create a new user account</p>
<br/>
<div class="col-lg-6">
<label for="createUsername">Choose a username</label>
<input type="text" id="createUsername" required autocomplete="name">
<label for="createPassword">Enter your password</label>
<input type="password" id="createPassword" required value="gdh" autocomplete="name">
</div>
<div class="col-lg-6">
<label for="createEmail">Enter your email</label>
<input type="text" id="createEmail" required>
<label for="createPasswordVerify">Confirm password</label>
<input type="password" id="createPasswordVerify" required >
</div>
<div class="userbut"><button onclick="createAccount()"class="btn btn-sm btn-info">Create Account</button></div>
</div>
</div>
这个javascript函数意味着从这些字段中获取值并使用它。
function createAccount() {
var password = $('#createPassword').val();
var veriPas = $('#createPasswordVerify').val();
var username = $('#createUsername').val();
var email = $('#createEmail').val();
if (email.trim() === "") {
alert('email is empty');
} else if (password.trim() === "") {
alert('password is empty');
} else if (password != veriPas) {
alert('Password did not match');
} else {
var isReg = app.regUser(email, password, 1, false);
if (isReg) {
alert('user created');
} else {
alert('no user creation');
}
}
}
问题是字段总是空的。当div "html-content"不用作工具提示时,js代码可以工作,但如果用户在图像周围显示为工具提示时,它就会失败。如何修复
在您的html中,密码输入框的ID为"frmNameA"但在JavaScript函数中,你可以用
引用它var password = $('#createPassword').val();
检查输入的id是否与函数使用的id相同。
更新
This might work…
$('#def-html').tooltip({
content: $("#html-content").html()
})
试试这个,我不确定data-tooltip范围是如何设置的,但这可能会有所帮助。
或者试试$('body input#createPassword').val();
另外,您可以将div放在它自己的文件中,并使用CSS内容调用它,并使用url和我在这里提供的选择方法之一。
#html-content:hover:after {
content: " (" url('myfilewithdivinit.html') ")";
}
使用.find()的例子,这也可以工作....如果你将它与上面的CSS content方法结合使用,就会有更多的机会。
function createAccount() {
var password = $('body').find('input#createPassword').val();
var veriPas = $('body').find('input#createPasswordVerify').val();
var username = $('body').find('input#createUsername').val();
var email = $('body').find('input#createEmail').val();
if (email.trim() === "") {
alert('email is empty');
} else if (password.trim() === "") {
alert('password is empty');
} else if (password != veriPas) {
alert('Password did not match');
} else {
var isReg = app.regUser(email, password, 1, false);
if (isReg) {
alert('user created');
} else {
alert('no user creation');
}
}
}
另外,你应该给你的按钮添加一个type属性。
<button type="button" onclick="createAccount()"class="btn btn-sm btn-info">Create Account</button>