Question

我正在寻找一个脚本，当输入字段中有特定数字时，它会更改div容器的背景图像。

我在这里建立了这个信用卡布局

内部是<input type="text" name="" class="credit-input">，类credit-input。

我正在寻找的是，如果值中的前三个数字生成不同的背景。

例如，当值以411开头时，应该有amex卡的背景图像，或者当它以311开头时，应该有mastercards等等。

总共有4种不同的背景。

我在js中表现不佳，所以我希望我能从这里找到一些帮助。

这就是我的html看待当下的情况。class="jp-front"包含了当前整个风格

<div class="jp-front">
                <input type="text" name="" class="credit-input">
            </div>

thx任何帮助

Answer 1

试试这个：

$(document).ready(function() {

    $(".credit-input").on("input",function(){

        var value = $(this).val();

        if (value == "411") 
            $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});

        else if (value == "311")
            $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});

    })

})

最终代码：

$(document).ready(function() {
  
  $(".credit-input").on("input",function(){
    var value = $(this).val();
    
    if (value == "411") 
      $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
    
    else if (value == "311")
      $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
            
        })
                
    })

.jp-front {
  width: 300px;
  height: 150px;
  border: 1px solid #000;
  background-size:100% 100%;
  background-repeat: no-repeat;
  padding: 20px 0px 0px 20px;
}

<div class="jp-front">
  <input type="text" name="" class="credit-input">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

您的输入元素将是 -

<div class="jp-front">
    <input type="text" name="card-number" class="credit-input">
</div>

让你的图像元素

<img src="default.jpg" id="card-img">

您的JavaScript将是这样的 -

$('input[name=card-number]').keyup(function() {

    var inp = $('input[name=search]').val();
    if (inp === '311') {
        $("#card-img").attr("src","mastercards.jpg");
    }
    else if (inp === '411') {
        $("#card-img").attr("src","amex.jpg");
    }
    else if (inp === '') {
        $("#card-img").attr("src","default.jpg");
    }
});

谢谢！

Answer 3

并不过分复杂，但这应该可以解决问题：

$("input[name='card']").keyup( function() {

    img = 'blank.png';

    switch($(this).val().substring(0, 3)) {

    case '111':
      img = '111.png';
      break;
    case '222':
      img = '222.png';
      break;
    }

    $('.img').css('background', 'url(' + img + ') no-repeat center center');
});

示例：https://jsfiddle.net/6hhtgnep/

Answer 4

如果你还没有JQuery

添加id =“...”和onchange =“”onkeypress =“”onkeydown =“”

<div class="jp-front" id="card-div-id">
    <input id="card-input-field-id" type="text" name="" onchange="onCodeInput()" onkeypress="onCodeInput()" onkeydown="onCodeInput()" class="credit-input">
</div>

使用Javascript：

<script>
    function onCodeInput(){
       var card_number = document.getElementById('card-input-field-id').value;
       if (str.substr(0, 4) == '5466') {
           document.getElementById('card-div-id').style.backgroundImage="url(images/mastercard.jpg)"
       } else { /* others */ }
    }
</script>

输入值更改时更改背景图像

4 个答案: