Изменение изображения в соответствии с входом

Question

У меня есть форма

<div id="form-main"> 
     <div id="form-div"> 
     <form class="form" id="form1"> 

      <p class="name"> 
      <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" /> 
      </p> 

      <p class="email"> 
      <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" /> 
      </p> 

      <p class="text"> 
      <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea> 
      </p> 


      <div class="submit"> 
      <input type="submit" value="SEND" id="button-blue"/> 
      <div class="ease"></div> 
      </div> 
     </form> 
     </div> 

и его CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); 

    html{ background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat; 
     background-size: cover; 
     height:100%; 
    } 

    #feedback-page{ 
     text-align:center; 
    } 

    #form-main{ 
     width:100%; 
     float:left; 
     padding-top:0px; 
    } 

    #form-div { 
     background-color:rgba(72,72,72,0.4); 
     padding-left:35px; 
     padding-right:35px; 
     padding-top:35px; 
     padding-bottom:50px; 
     width: 450px; 
     float: left; 
     left: 50%; 
     position: absolute; 
     margin-top:30px; 
     margin-left: -260px; 
     -moz-border-radius: 7px; 
     -webkit-border-radius: 7px; 
    } 

    .feedback-input { 
     color:#3c3c3c; 
     font-family: Helvetica, Arial, sans-serif; 
     font-weight:500; 
     font-size: 18px; 
     border-radius: 0; 
     line-height: 22px; 
     background-color: #fbfbfb; 
     padding: 13px 13px 13px 54px; 
     margin-bottom: 10px; 
     width:100%; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
     border: 3px solid rgba(0,0,0,0); 
    } 

    .feedback-input:focus{ 
     background: #fff; 
     box-shadow: 0; 
     border: 3px solid #3498db; 
     color: #3498db; 
     outline: none; 
     padding: 13px 13px 13px 54px; 
    } 

    .focused{ 
     color:#30aed6; 
     border:#30aed6 solid 3px; 
    } 

    /* Icons ---------------------------------- */ 
    #name{ 
     background-image: url(http://www.izwipe.com/change/c/data/3.gif); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #name:focus{ 
     background-image: url(http://www.izwipe.com/change/c/data/3.gif); 
     background-size: 30px 30px; 
     background-position: 8px 5px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #email{ 
     background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #email:focus{ 
     background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #comment{ 
     background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    textarea { 
     width: 100%; 
     height: 150px; 
     line-height: 150%; 
    } 

    input:hover, textarea:hover, 
    input:focus, textarea:focus { 
     background-color:white; 
    } 

    #button-blue{ 
     font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
     float:left; 
     width: 100%; 
     border: #fbfbfb solid 4px; 
     cursor:pointer; 
     background-color: #3498db; 
     color:white; 
     font-size:24px; 
     padding-top:22px; 
     padding-bottom:22px; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     transition: all 0.3s; 
     margin-top:-4px; 
     font-weight:700; 
    } 

    #button-blue:hover{ 
     background-color: rgba(0,0,0,0); 
     color: #0493bd; 
    } 

    .submit:hover { 
     color: #3498db; 
    } 

    .ease { 
     width: 0px; 
     height: 74px; 
     background-color: #fbfbfb; 
     -webkit-transition: .3s ease; 
     -moz-transition: .3s ease; 
     -o-transition: .3s ease; 
     -ms-transition: .3s ease; 
     transition: .3s ease; 
    } 

    .submit:hover .ease{ 
     width:100%; 
     background-color:white; 
    } 

    @media only screen and (max-width: 580px) { 
     #form-div{ 
      left: 3%; 
      margin-right: 3%; 
      width: 88%; 
      margin-left: 0; 
      padding-left: 3%; 
      padding-right: 3%; 
     } 
    } 

, когда я ввести номер, начиная с 3, я хочу изображение в иконку «визы», и другое изображение, когда я вводил число 9. Возможно ли это?

У меня есть JavaScript

var num2img = { 
    "3":"visa", 
    "9":"mastercard" 
}; 

$('#num').keyup(function(){ 
    var val = this.value; 
    if(val.length<=1){ 
    var n = this.value.charAt(0); 
    if(val && num2img[n]!==undefined){ 
     $('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png'; 
    }else{ 
     $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5'; 
    } 
    } 
}); 

но изображение приводится в CSS, поэтому изображение оленья кожа имеет идентификатор, это браузер для HTML images.Can кто-то поможет мне сделать это?

Answer 1

Demo

var num2img = { 
    "3":"visa", 
    "9":"mastercard" 
}; 

$('#name').keyup(function(){ 
    var val = this.value; 
    if(val.length<=1){ 
    var n = this.value.charAt(0); 
    if(val && n in num2img){ 
     $(this).css({backgroundImage: "url(http://www.izwipe.com/change/c/data/"+n+".gif)"}); 
    }else{ 
     $(this).css({backgroundImage: "url(http://www.izwipe.com/change/c/data/1.gif)"}); 
    } 
    } 
}); 

^{Просто установите изображение по умолчанию в else}

Answer 2

Вы должны изменить свойство CSS

$('body').css('background','url(http://www.placehold.it/300x300) no-repeat top left'); 

увидеть эту скрипку: http://jsfiddle.net/qg7H6/

Answer 3

Вы можете изменить URL в CSS, как это:

$('#cardImage')[0].css("background-image", "url('http://placehold.it/100x100/eee&text='+ num2img[n] +'.png')");