Question

标题可能措辞不好，所以解释我的意思。

我有三个按钮，我想根据他们按下的内容替换div的图像。因此，例如，第一张图片将是一片森林。一个按钮将对应于进一步的选择，以便该按钮用另一个按钮替换该图像。一个按钮会让你选择一些东西/去另一个地方，后一个选项用另一个替换当前图像，最后一个会让你痒痒。

制作一个按钮取代一次图像并不是什么大不了的事，但是如果你想按下按钮一旦按下按钮就用新图像替换图像，我怎么看你应该怎么做？

Answer 1

只需改变css background-image：url就像我吼一样。当你点击id（id #grass）的按钮时，它基本上改变了页面的中心部分（例如grass.jpg的url）的背景图像。我使图像名称和Id相同，只是为了使它更容易理解。希望能帮助到你。

$('#grass').click(function(){
  $('.central').css('background-image', 'url("img/grass.jpg")');
});
$('#flower').click(function(){
  $('.central').css('background-image', 'url("img/flower.jpg")');
});
$('#forest').click(function(){
  $('.central').css('background-image', 'url("img/forest.jpg")');
});

Answer 2

我不确定完全理解你的问题。假设您要迭代图像列表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div id="imageDisplay"></div>

        <button id="previous" type="button" onclick="displayPrevious()" >previous</button>
        <button id="next" type="button" onclick="displayNext()" >next</button>

        <script>

            var imagesList = ['banana.png',
                              'apple.png',
                              'orange.png'];

            var currentIndex = 0;

            function displayPrevious() {
                if(currentIndex > 0) {
                    currentIndex--;
                    setBackGroundImage(imagesList[currentIndex]);
                }
            }


            function displayNext() {
                if(currentIndex < imagesList.length) {
                    currentIndex++;
                    setBackGroundImage(imagesList[currentIndex]);
                }
            }


            function setBackGroundImage(imageName) {
                var imageDisplayDiv = document.getElementById('imageDisplay');
                imageDisplayDiv.style.backgroundImage = "url('img/"+imageName+"')";
            }

        </script>

    </body>
</html>

Jquery按钮可以多次替换图像

2 个答案: