<分区>
关闭 6 年前。
- 编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
- 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。
javascript - 输入值改变时改变背景图片
标签 javascript jquery html css
我正在寻找一个脚本，当特定数字进入输入字段时，它会更改 div 容器的背景图像。
我在这里构建信用卡布局
里面是一个<input type="text" name="" class="credit-input">同类credit-input .
我正在寻找的是，如果值中的前三个数字生成不同的背景。
因此，例如，当值以 411 开头时，应该有一张美国运通卡的背景图片，或者当它以 311 开头时，应该有万事达卡等等。
总共会有 4 种不同的背景。
我的js不太好，所以我希望能在这里找到你的一些帮助。
我的html就是这样看着当下。class="jp-front"包括此刻的整个风格
<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>
感谢任何帮助
最佳答案
试试这个:
$(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>
关于javascript - 输入值改变时改变背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39597231/