JQuery在線面試（15分鐘）TestDome

Question

function createProductCodeForm(parent) { 
    var form = $("<form/>"); 

    form.append($("<label>").text('Product Code:')); 
    form.append($("<input>").attr('name', 'productCode').attr('type', 'text')); 
    form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.')); 

    form.append('<br>'); 

    form.append($("<input>").attr('type', 'submit')); 

    parent.append(form); 
} 

createProductCodeForm函數用於創建一個接受用戶產品代碼的新表單。

表單的當前版本包含提示：'產品代碼可以在標籤上找到'。該提示目前對用戶始終可見。

改進窗體，以便僅當輸入元素是焦點元素時才呈現提示。

我有一個問題得到這個問題，因爲我幾乎沒有jQuery的經驗，並且這個測試的大部分都是用javascript/php。

Answer 1

您可以使用Bootstrap插件來完成任務。

function createProductCodeForm(parent) { 
 
    var form = $("<form/>"); 
 

 
    form.append($("<label>").text('Product Code:')); 
 
    var $productCode = $('<input />'); 
 
    $productCode.attr({'name' : 'productCode', 'type': 'text'}); 
 
    // use Bootstrap tooltip plugin: 
 
    $productCode.tooltip({'trigger':'focus', 'title': 'The product code can be found on the label.', 'placement':'right'}); 
 
    form.append($productCode); 
 
    form.append('<br>'); 
 

 
    form.append($("<input>").attr('type', 'submit')); 
 

 
    parent.append(form); 
 
} 
 

 
createProductCodeForm($('body'))

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

你將不得不對焦點/模糊的事件創建事件處理程序：

function createProductCodeForm(parent) { 
 
    var form = $("<form/>"); 
 
    var input = $("<input>") 
 
       .attr('name', 'productCode') 
 
       .attr('type', 'text'); 
 

 
    var label = $("<label>") 
 
       .attr('name', 'hint') 
 
       .text('The product code can be found on the label.') 
 
       .hide(); 
 

 
    form.append($("<label>").text('Product Code:')); 
 
    form.append(input); 
 
    form.append(label); 
 
    
 
    input.focus(label.show.bind(label)); 
 
    input.blur(label.hide.bind(label)); 
 
    
 
    form.append('<br>'); 
 
    form.append($("<input>").attr('type', 'submit')); 
 
    parent.append(form); 
 
} 
 

 
createProductCodeForm($('#formContainer'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="formContainer"></div>

Answer 3

您只需綁定正確的屬性得到這個全部完成：

function createProductCodeForm(parent) { 
    var form = $("<form/>"); 

    form.append($("<label>").text('Product Code:')); 
    form.append($("<input>").attr('name', 'productCode').attr('type', 'text').attr('onfocus','$("label[name]").show()').attr('onblur','$("label[name]").hide()')); 
    form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.').attr('style','display:none')); 

    form.append('<br>'); 

    form.append($("<input>").attr('type', 'submit')); 

    parent.append(form); 
} 

Codepen：https://codepen.io/YasirKamdar/pen/xYJdNy