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的值{1}}无论如何。

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

Answer 2

案例陈述应为case 'a':，请参阅下面的代码，对于textvalue，请使用$('input:text[name=fname]').val();：

$(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")');
    }
  });

});

#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');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scene">
  <div class="video" id="video"></div>
</div>

<form action="#">
  <input type="text" id="txt_name"><br>
  <span id="submit">Vamos!</span>
</form>

Jquery根据输入值改变div背景

2 个答案: