4

久违的浏览器，第一次发帖。

我想做的是让用户选择要在下拉菜单中显示的周数，然后显示那么多 div。现在我已经设置好了，我可以在其中显示一个或全部 div，但我想为以前的 div 做这件事。

现在我有：

<SELECT name="number_of_weeks" id="number_of_weeks">
<OPTION value = "week1">1</OPTION>
<OPTION value = "week2">2</OPTION>
<OPTION value = "week3">3</OPTION>
</SELECT>

<div id = "week1" class = "weekmenu">
Week 1 </br>
</div>
<div id = "week2" class = "weekmenu">
Week 2 </br>
</div>
<div id = "week3" class = "weekmenu">
Week 3 </br>
</div>

对于 javascript：

$(document).ready(function () {
        $('.weekmenu').hide();
        $('#week1').show();
        $('#number_of_weeks').change(function () {
            $('.weekmenu').hide();
            $('#'+$(this).val()).show();
        });
    });

输出应该是这样的： 如果选择了 week1，则只显示 week1 div。如果选择第 2 周，则显示第 1 周和第 2 周 div。如果选择第 3 周，则显示第 1 周、第 2 周和第 3 周 div。

我一直在努力解决这个问题……我尝试创建一些嵌套的 div，但效果并不理想。我还尝试为多个 div 提供自己的类，然后尝试显示它们。

JSFiddle：http: //jsfiddle.net/meRcr/21/

任何帮助表示赞赏！

4

4 回答 4

2

只需将 jQuery 的最后一行更改为：

  $('#' + $(this).val()).prevUntil('select').addBack().show();

jsFiddle 示例

完整代码：

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevUntil('select').addBack().show();
    });
});
于 2013-05-17T03:52:11.070 回答
2

试试这个：-

$('#' + $(this).val()).prevAll('.weekmenu').andSelf().show();是关键。

.prevAll()将为您提供与选择器匹配的所有前面的兄弟姐妹.weekmenu，然后将其自身也包含andSelf()到集合中。

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevAll('.weekmenu').andSelf().show();
    });
});

小提琴

于 2013-05-17T03:54:50.770 回答
0

尝试这样的事情，我没有测试它，但我认为它有效:)

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();

        var weekNumbers = $(this).val();
        for(var i = 1; i<= weekNumbers; i++) {
            $('#week' + i).show();
        }
    });
});
于 2013-05-17T03:52:26.650 回答
0

使用级联方法。data-*通过属性建立父子关系。在每个 div 上，属性中都有其先前的 div id。data-parentid="2". 然后你可以继续链接你的功能，直到你得到一个没有父ID的div。您可以选择任何方式更改布局，并且这种关系将保持不变。

于 2013-05-17T03:56:11.680 回答