javascript - jQuery 测验元素 : Append Image After a Text Field to Denote Right or Wrong

Question

https://jsfiddle.net/boriskay/thsmdqrt/

这是一个简单的文本字段测验。我需要的是在每个文本字段后的右侧直接显示复选标记或 X(错误)图标。

文本字段有一个 CSS Position: absolute。

HTML:

<div id="map">
    <img src="http://www.homedepot.com/catalog/productImages/1000/eb/ebd83d8b-6e6f-4526-8dd9-e063f0ef66bd_1000.jpg">


<form>  
        <input id="q1" type="text" />
        <input id="q2" type="text" />
        <input type="submit" id="submit" value="Click When Done" />
</form>
</div>

<script type="text/javascript" src="js/quiz.js"></script>

JavaScript/JQUERY:

var answers = {
    "q1": ["Camisas", "camisas", "CAMISAS"],
    "q2": ["Zapatos", "zapatos", "ZAPATOS"]
    };



function markAnswers() {
    $("input[type='text']").each(function() {
        console.log($.inArray(this.value, answers[this.id]));

    if($.inArray(this.value, answers[this.id]) === -1) {
        $(this).parent().append("<img class='result_pic' src='https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png' />");

    } else {
        $(this).parent().append("<img class='result_pic' src='http://image.flaticon.com/icons/png/128/74/74414.png' />");
        $("form").append("Great job!");
        }
    })
}

$("form").on("submit", function(e){
    e.preventDefault();
    markAnswers();
    $("form").append("Great job!");
});

CSS:

#q1, 
#q2 {
    position: absolute;
    display:inline-block;
    z-index:100;
    height: 20px;
}

#q1 {   
    margin-top: -450px;
    margin-left: 350px; 
}

#q2 {   
    margin-top: -160px;
    margin-left: 350px;
}

.result_pic {
    position: relative;
    z-index:100;
    display:inline;
}

#submit {
    height: 35px;
    font-size: 17px;
    background-color: skyblue;
}

ol {
    list-style: none;
}

提前致谢。 :)

Answer 1

首先::将两个输入包装到单独的 div 中，并在这些 div 而不是输入上应用 position:absolute;。

第二个::定义图像的 width 和 height。并将 display:flex; 应用于包含 div。并应用 align-items:center; 使输入和图像垂直居中。

这是一个 fiddle以下是工作片段。

var answers = {
    "q1": ["Camisas", "camisas", "CAMISAS"],
    "q2": ["Zapatos", "zapatos", "ZAPATOS"]
};

function markAnswers() {
	$("input[type='text']").each(function() {
		console.log($.inArray(this.value, answers[this.id]));
	
	if($.inArray(this.value, answers[this.id]) === -1) {
		$(this).parent().append("<img class='result_pic' src='https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png' />");
		
	} else {
		$(this).parent().append("<img class='result_pic' src='http://image.flaticon.com/icons/png/128/74/74414.png' />");
		$("form").append("Great job!");
		}
	})
}

$("form").on("submit", function(e){
	e.preventDefault();
	markAnswers();
	$("form").append("Great job!");
});

#q1C, 
#q2C{
	position: absolute;
	display:flex;
	z-index:100;
  align-items:center;
}
#q1,#q2{
  height: 20px;
  float:left;
}

#q1C{	
	margin-top: -450px;
	margin-left: 350px;	
}

#q2C{	
	margin-top: -160px;
	margin-left: 350px;
}

.result_pic {
	position: relative;
  z-index:100;
  width:20px;
  height:20px;
  margin-left:5px;
}

#submit {
	height: 35px;
	font-size: 17px;
	background-color: skyblue;
}

ol {
	list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
	<img src="http://www.homedepot.com/catalog/productImages/1000/eb/ebd83d8b-6e6f-4526-8dd9-e063f0ef66bd_1000.jpg">
  <form>	
    <div id="q1C"><input id="q1" type="text" /></div>
    <div id="q2C"><input id="q2" type="text" /></div>
		<input type="submit" id="submit" value="Click When Done" />
  </form>
</div>