问题描述:

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');
});
相关阅读:
Top