0

我对选择框 div 显示隐藏有疑问...首先，这是我的来源

HTML：

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<a href="#"><span>Go</span></a>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

JS：

$(function() {
    $('#colorselector').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

演示：http: //jsfiddle.net/FvMYz/1345/

当我选择红色时，红色 Div 显示...但我想更改为...添加 Go 按钮。但很难做到……有人可以帮助我吗？

4

2 回答 2

1

这是你的想法吗？

 $(function() {
        $('a').click(function(){
            $('.colors').hide();
            $('#' + $('#colorselector').val()).show();
        });
    });

JSFIDDLE

于 2013-01-17T02:27:22.797 回答
1

我的答案与上面几乎相同，但是我会在触发事件的 href 以及 .on() 方法上放置一个类或 id，因为现在不推荐使用 .click 。.click() 只是通过 .on() 运行一个函数，所以基本上你通过 .click() 调用 .on()，你可以直接调用 .on()。.on() 的另一个好处是您可以通过执行以下操作轻松地将多个事件侦听器类型绑定到一个选择器：

$(something).on('click, mouseover', function() { // whatever });

$(function() {

     $('a[href="#"]').on('click', function() {
          $('.colors').hide();
          $('#'+ $('#colorselector').val()).show();
     });
});
于 2013-01-17T05:58:42.200 回答