当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - To change Background Color and pick value of pressed Keys

问题描述:

I Have created a Numeric Keypad. On press of Numeric Key I want to change Background Color of 'li span' elements that are in 'enteredPin' DIV one by one. The Value of Numeric Keys will go in hidden Password field.

What should be Jquery?

<div id="showNumPad">

<ul id="enteredPin"class="pin-list">

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

</ul>

<div class="keypad-container">

<ul id="numberList">

<li><span>1</span></li>

<li><span>2</span></li>

<li><span>3</span></li>

<li><span>4</span></li>

<li><span>5</span></li>

<li><span>6</span></li>

<li><span>7</span></li>

<li><span>8</span></li>

<li><span>9</span></li>

<li><span>0</span></li>

</ul>

</div>

</div>

/* CSS is HERE/*

.pin-list{ width:100%; float:left; text-align:center;}

.pin-list li{ display:inline-block;}

.pin-list li span{ width:15px; height:15px; display:inline-block; border:solid 1px #fff; border-radius:50%; margin:7px;}

.keypad-container{ width:100%; float:left; margin:10px 0;}

.keypad-container ul{ width:99%; display:inline-block; text-align:center;}

.keypad-container ul li{ display:inline-block; margin:7px 10px;}

.keypad-container ul li span{ width:60px; height:60px; display:inline-block; border-radius:50%; color:#fff; border:solid 1px #fff; text-align:center; line-height:60px; font-size:25px; cursor:pointer;}

.keypad-container ul li span:hover, .keypad-container ul li span:active, .keypad-container ul li span:focus{ background:#fff; color:#000;}

网友答案:

Add <input type="hidden" name="vPassword" id="vPassword" value=""> in your HTML.

Please provide following js

$(document).on("click","#numberList li span",function(){
     var js_password = $("#vPassword").val();
     var enter_pin_length = js_password.length;
     if(enter_pin_length <= 3){
         var eleObj = $("#enteredPin li span").get(enter_pin_length);
         $(eleObj).css('background',"red");
         $("#vPassword").val(js_password + $(this).text());
     }
});

Please find answer on following URL : https://jsfiddle.net/0pdL71m2/25/

网友答案:

Here an example of how to target the entered pin li:

css:

.entered{
    background-color: red;
}

js:

$('#numberList').find('li').on('click', function() {
    $('#enteredPin').find('li').not('.entered').eq(0).addClass('entered');
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: