gpt4 book ai didi

Jquery根据输入值改变div背景

转载 作者:行者123 更新时间:2023-11-28 16:58:12 26 4
gpt4 key购买 nike

我一直在努力得到它,但最终,我无法得到它...... ¿有人可以帮我吗?我想要的是能够根据输入值更改一些背景。这是代码:

$(document).ready(function(){

$("#submit").click(function () {
var whatLetter = $('input:text[name=fname]').val();
switch (whatLetter) {
case (whatLetter == "a"):
alert('A');
$("#video").css('background-image','url("http://www.royaltyfreespaceimages.com/imagenes/astronauts/astronauts_g/Astronaut-Outer-Space-Moon.jpg")');
break;
case (whatLetter == "b"):
alert('B');
$("#video").css('background-image','url("http://www.hdimagewallpaper.com/wp-content/uploads/2015/02/Space-Astronout-12-Cool-Wallpapers-HD.jpg")');
break;
default:
alert('otro');
$("#video").css('background-image','url("http://vignette2.wikia.nocookie.net/doctorwho/images/c/c4/The-impossible-astronaut.jpg/revision/latest?cb=20140808110916&path-prefix=es")');
}
});

});
#scene {
position: relative;
width: 100%;
height: 300px;
}

.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.video.hidden { display: none; }

#video {
background-image: url('http://theincredibletide.files.wordpress.com/2012/06/astronaut-on-fire-by-jack-crossing.jpg');
}
<div id="scene">
<div class="video" id="video"></div>
</div>

<form action="#">
<input type="text" name="fname" id="txt_name"><br>
<span id="submit">Vamos!</span>
</form>

最佳答案

您的选择器输入错误。它应该是 $('#txt_name');

你原来的是 input:text[name=fname]',但如果你想让它工作,它应该是 input[name=fname]' 或者只是使用 ID。

还有,你的switch是错误的:

$(document).ready(function(){

$("#submit").click(function () {
var whatLetter = $('#txt_name').val();
switch (whatLetter) {
case "a":
alert('A');
$("#video").css('background-image','url("http://www.royaltyfreespaceimages.com/imagenes/astronauts/astronauts_g/Astronaut-Outer-Space-Moon.jpg")');
break;
case "b":
alert('B');
$("#video").css('background-image','url("http://www.hdimagewallpaper.com/wp-content/uploads/2015/02/Space-Astronout-12-Cool-Wallpapers-HD.jpg")');
break;
default:
alert('otro');
$("#video").css('background-image','url("http://vignette2.wikia.nocookie.net/doctorwho/images/c/c4/The-impossible-astronaut.jpg/revision/latest?cb=20140808110916&path-prefix=es")');
}
});

});

当你使用case时,你不需要做WhatLetter == 'a',你可以直接把'a' ,因为无论如何 switch 都是 whatLetter 的值。

JSFiddle

你也可以用纯 JavaScript 来做,不需要 jQuery:

(function(){
document.getElementById("submit").onclick = function() {
var whatLetter = document.getElementById("txt_name").value,
video = document.getElementById("video");
switch (whatLetter) {
case 'a':
alert('b');
video.style.background = "url(http://www.royaltyfreespaceimages.com/imagenes/astronauts/astronauts_g/Astronaut-Outer-Space-Moon.jpg)";
break;
case 'b':
alert('a');
video.style.background = "url(http://www.hdimagewallpaper.com/wp-content/uploads/2015/02/Space-Astronout-12-Cool-Wallpapers-HD.jpg)";
break;
default:
alert('otro');
video.style.background = "url(http://vignette2.wikia.nocookie.net/doctorwho/images/c/c4/The-impossible-astronaut.jpg/revision/latest?cb=20140808110916&path-prefix=es)";
}
}
})();

JSFiddle

关于Jquery根据输入值改变div背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31741432/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com