Question

你好我有一个html问题选择...当用户点击其中一个值时，背景图像必须改变并出现一个新的选择，旧的选择将消失。我尝试了很多东西，但它没有工作......请帮帮我......

以下是代码：

<script>
$(document).ready(function(){
var header = $('body');

function SelectElement(valueToSelect)
{    
    var element = document.getElementById('test');
    element.value = '1';
}
$(function() {
  $('.test').click(function() {
    var backgrounds = new Array(
    'url(images/Main/1.png)'
  , 'url(images/Main/2.jpg)'
  , 'url(images/Main/3.jpg)'
  , 'url(images/Main/4.jpg)'
  , 'url(images/Main/5.jpg)'
  , 'url(images/Main/6.jpg)'
  , 'url(images/Main/7.jpg)'
  , 'url(images/Main/8.jpg)'
  , 'url(images/Main/9.jpg)'
  , 'url(images/Main/10.jpg)'
);
  });
}); 
var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 6000);

header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<center>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
<form name="test">
<select id="test" name="test">
<option value="Select Season" selected="selected" disabled="disabled">Select Season..</option>
<option value="1" onclick="function()">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>

Answer 1

您当前的代码存在多个问题 - test是一个ID，而不是一个类，因此选择器为#test而不是.test

无法从函数nextBackground()访问包含图像的数组，因为此数组是在附加到click事件的函数中定义的。
为了可以访问其他功能，可以将其声明为全局我猜你不想在单击选择时更改图像，但选择了一个选项。也许您想根据所选选项更改背景图像 - 在这种情况下，可以将函数附加到选择的change()事件并根据索引从背景数组中选择图像选项值，例如像这样：

$('#test').change(function () {
    header.css('background-image', backgrounds[$(this).val() -1]);
});

此外，在您当前的代码中，您调用函数nextBackground() 循环遍历所有背景图像。我刚刚在示例Fiddle

中对此进行了评论

剩下的问题是，当选择一个选项时，你想要显示的新选择而不是旧的选择应该与旧选择不同，也许您可以将此信息添加到您的问题中。

Answer 2

你的问题并不完全清楚。下面的第一个（隐藏）snippit将背景设置为与所选选项在相同索引处存储在数组中的图像，然后根据您的要求显示不同的选择框。但我觉得第二个（显示）片段是你真正需要的。

为了更好地为您提供帮助，请修改您的问题以包含以下问题的答案：

计时器是否应该立即开始更改背景页面加载？
更改第一个选择框时应该发生什么
第二个选择框更改后会发生什么？
我们是在谈论页面主体的背景还是其他一些div，或者每个事件是否控制了不同div的背景？
是从同一个阵列中拉出所有图片，还是每个事件都有不同的源图像池？

$(document).ready(function(){
  
var header = $('body');

function SelectElement(valueToSelect)
{    
    var element = document.getElementById('test');
    element.value = '1';
}

  $('#test').change(function() {
        
    // I did this with 4 images for testing, add as many as you like in yours
        var backgrounds = ['url(http://stylonica.com/wp-content/uploads/2014/03/Nature___Seasons___Spring__038259_.jpg)'
  , 'url(http://hd.wallpaperswide.com/thumbs/summer_holiday-t2.jpg)'
  , 'url(http://www.grandfather.com/wp-content/uploads/2012/08/fall-road.jpg)'
  , 'url(http://hooptricks.org/wp-content/uploads/2014/01/road-winter.jpg)'];
     
    // get index of selected option
    // -1 is to account for the disabled fist option acting as a placeholder
    var cur =  $(this)[0].selectedIndex -1; 
    
    // set the image to the background
    header.css('background-image', backgrounds[cur]);
                           
    //hide the first select and show the second
    $('#fisrtSelDiv').hide();
    $('#secondSelDiv').show();
    
    
  });


/*

// I commented the below out as it doesnt appear to be related to your question
// if you need the select to begin a timer that changes the backgrounds peridically
// please edit your question with more detail

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 6000);
header.css('background-image', backgrounds[0]);

*/
  
  
});

#secondSelDiv{
  display:none;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
  
<div id="fisrtSelDiv">
<form name="test">
<select id="test" name="test">
<option value="" selected="selected" disabled="disabled">Select Season..</option>
<option value="Season 1">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>
</div>
  
<div id="secondSelDiv">
<form name="test2">
<select id="test2" name="test">
<option value="" selected="selected" disabled="disabled">Select something else...</option>
<option value="something 1">A thing</option>
<option value="something 2">A second thing</option>
<option value="something 3">Something else</option>
<option value="something 4">Another thing</option>
</select>
</form>
</div>

当用户选择一个选项然后显示下一个选项时，您似乎更希望图像旋转开始，如果是这样，这将让您到达那里：

$(document).ready(function(){
  
var header = $('body');
  
  
var current = 0;       
// I did this with 4 images for testing, add as many as you like in yours
var backgrounds = ['url(http://stylonica.com/wp-content/uploads/2014/03/Nature___Seasons___Spring__038259_.jpg)'
  , 'url(http://hd.wallpaperswide.com/thumbs/summer_holiday-t2.jpg)'
  , 'url(http://www.grandfather.com/wp-content/uploads/2012/08/fall-road.jpg)'
  , 'url(http://hooptricks.org/wp-content/uploads/2014/01/road-winter.jpg)'];
     

function SelectElement(valueToSelect)
{    
    var element = document.getElementById('test');
    element.value = '1';
}

  $('#test').change(function() {
    
    // set the first image to the background
    header.css('background-image', backgrounds[0]);
    
    //start the timer
    setInterval(nextBackground, 6000);
                           
    //hide the first select and show the second
    $('#fisrtSelDiv').hide();
    $('#secondSelDiv').show();
    
    
  });





function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}

  
  
});

#secondSelDiv{
  display:none;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
  
<div id="fisrtSelDiv">
<form name="test">
<select id="test" name="test">
<option value="" selected="selected" disabled="disabled">Select Season..</option>
<option value="Season 1">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>
</div>
  
<div id="secondSelDiv">
<form name="test2">
<select id="test2" name="test">
<option value="" selected="selected" disabled="disabled">Select something else...</option>
<option value="something 1">A thing</option>
<option value="something 2">A second thing</option>
<option value="something 3">Something else</option>
<option value="something 4">Another thing</option>
</select>
</form>
</div>

选择更改背景图像更改时

2 个答案: