從工具提示html元素獲取價值

Question

我有一張圖片，顯示了一些文本字段（用戶名和密碼）作為工具提示，供用戶瀏覽。

<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代碼有效，但當用戶在圖像上方四處顯示時，如果將其顯示為工具提示，則該js代碼將失敗。 我該如何解決

Answer 1

在html中，密碼輸入框的ID為“ frmNameA”，但在JavaScript函數中，您可以使用

var password = $('#createPassword').val();

檢查輸入的ID是否與您的函數使用的ID相同。

Answer 2

更新資料

這可能有效...

$('#def-html').tooltip({
    content: $("#html-content").html()       
})

---

試試這個，我不確定如何設置數據工具提示范圍，但這可能會有所幫助。

或者嘗試$('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>