Question

我已经解决了大约90％，但似乎无法获得最后10％：

我有一个要求用户选择位置的表单。在选择时，我希望页面（和请求表单）淡化不透明度，新的div在淡入淡出定价信息。

现在，一切按预期工作的第一个选项（novato），但在列表中的任何其他选项上，页面和请求表格都淡出淡出，新的定价div不可见。

我很难过，而且很确定我只是错过了一些愚蠢的事情（成为新手）。任何帮助表示赞赏！

申请表：

<form id="locations">
<select>
<option>Choose a location</option>
<option></option>
<option id="novato" value="novato">Novato</option>
<option id="sanleandro" value="sanleandro">San Leandro</option>
<option id="livermore" value="livermore">Livermore</option>
<option id="sanjose" value="sanjose">San Jose</option>
</select>
<input type="submit" id="submit" value="go"/>
</form>

JS：

> $(function() {
>   $("#locations").submit(function() {
>       if ($("#novato").attr("selected")) {
>           $("#pricing_novato").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_novato").css({top:"0",left:"50%",margin:"20px
> 0 0 -"+($("#pricing_novato").width() /
> 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#sanleandro").attr("selected")) {
>           $("#pricing_sanleandro").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px
> 0 0
> -"+($("#pricing_sanleandro").width() / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#livermore").attr("selected")) {
>           $("#pricing_livermore").fadeIn("normal");           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px
> 0 0
> -"+($("#pricing_livermore").width() / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#sanjose").attr("selected")) {
>           $("#pricing_sanjose").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px
> 0 0 -"+($("#pricing_sanjose").width()
> / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           } 
  }); 
});

div：

<div id="pricing_novato">content</div>
<div id="pricing_sanleandro">content</div>
<div id="pricing_livermore">content</div>
<div id="pricing_sanjose">content</div>

Answer 1

您是否尝试将当前选定的选项分配给变量，然后对其进行测试？

var selectedLocation = $("select option:selected").val();

另外，如果#page是你的容器，则不会这样做：

$("#page").fadeTo("normal", 0.1);

淡出容器中包含的所有内容？我只是假设，因为我在你的代码中看不到它。

您还可以尝试进行一些控制台日志记录，或者只是提醒您要测试的值，以便了解代码中发生的情况

Answer 2

我刚刚用你的代码创建了一个jsfiddle：http://jsfiddle.net/Efb32/6/。

我更改了一些内容，看看代码：添加了一些样式，更改了css(...)更改以使其适合，将return false添加到表单提交代码中，以便它在jsfiddle中工作并添加代码中使用的#page和#pricing_selector div。对于所有4个选项，它似乎表现相同。

我想我给出了输出我看不出有什么问题 - 你能检查一下jsfiddle上的代码是否符合你的预期吗？

在表单提交上显示/隐藏div

2 个答案: