使用jQuery循环并隐藏一些元素

时间:2015-10-28 07:28:32

标签: jquery html

我试图根据下拉菜单中的选项隐藏元素。它应该工作的方式是,如果你单击下拉并选择1,第一个带有“日期”类的段落和div中带有“域”类的相应域应该保留,第二个(最后出现的那些)应该隐藏起来。如果用户在下拉菜单中选择另一个号码,它也需要是可逆的。

它基本上是一个允许用户(在这种情况下)根据时间天数显示和隐藏域名的功能。

感谢任何帮助。

<select id="search3">
    <option value="">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<div class="dates">
    <p class="date">30.09.2015</p>
</div>

<div class="domains">
    <p class="30.09.2015">blabla.biz</p>
    <p class="30.09.2015">peeeek.com</p>
    <p class="30.09.2015">juppppp.net</p>
</div>

<div class="dates">
    <p class="date">29.09.2015</p>
</div>

<div class="domains">
    <p class="29.09.2015">okhvor.org</p>
    <p class="29.09.2015">jahahaha.tv</p>
</div>

尝试过我所知道的错误,但是: - )

if ($('#search3')!=0)
{
    tc=0;
    $('.date').each(function() {
        if (tc < s3data && $(".domains p").hasClass( $('.date').value ))
        {
            return true;
        }
        ++tc;
    });

1 个答案:

答案 0 :(得分:3)

我添加了几个类并使用了jquery hide()和show()

JSFIDDLE

JQuery代码

$('.dates').hide();
$('.domains').hide();
$('#search3').change(function(){
    $('.dates').hide();
    $('.domains').hide();
    val = $('#search3').val();
    i=0;
    while(i<=val) {
        $('.'+i).show();
        i++;
    }       
});