Jquery根据输入值改变div背景

Question

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

$(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>

Answer 1

您的选择器输入错误。它应该是 $('#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