Question

我是一个初学者，而且我的代码有点困难。

我在数组中有类别，我将它们列在下拉框中。

我想这样做，每个分类都有不同的形式。像电影有电影形式音乐有音乐形式。

<script>
$('document').ready(function() {


    $('.valami').change(function() {
        $('select.valami option:selected').each(function() { 
            var data =  $(this).text();

                switch(data) {
                    case 'Film':
                        alert('Film');
                    break;

                    case 'Sorozat':
                        alert('Sorozat');
                    break;  

                    case 'Zene':
                        alert('Zene');
                    break;  

                    case 'XXX':
                        alert('XXX');
                    break;  

                    case 'Játék':
                        alert('Játék');
                    break;  

                    case 'Program':
                        alert('Program');
                    break;  

                    case 'Könyv':
                        alert('Könyv');
                    break;  

                    default: 'Film';                
                }

        });//each
    });//change

    });//ready

</script>

这里是代码，我只是测试是否有效。

我的问题是，如果选择了一个类别，表单会向下滑动，我会设置它，但是如果我选择另一个，之前选择的那个不会被隐藏。

我尝试过这样的

if($('.film').is(':hidden')) {
 $('.film').show();
}else {
   $('.film').hide();
}

它的工作但如果我选择一个其他类别它停留在那里，有人可以给我一个提示我缺少什么吗？

谢谢

HTML

<select name='kategoriak' class='valami'>
    <?php foreach ($kategoria as $k) { ?>

    <option value="<?php echo $k['id'] ?>"><?php echo $k['nev'] ?></option>

    <?php } ?>
</select>


<div class='film'>teh form here</div>

其他形式如电影，它在css中定义为无显示

Answer 1

我就是这样做的，我认为它可以做你想要的，我已经改变了你的代码，让我知道你是否需要不同的代码。

我使用静态HTML只是为了向您展示它的工作原理。

HTML

<select name='kategoriak' class='valami'>
    <option value="film">Film</option>
    <option value="sorozat">Sorozat</option>
    <option value="zene">Zene</option>
</select>


<div class="form" id='film'>teh form here</div>
<div class="form" id='sorozat'>ANOTHER form here</div>
<div class="form" id='zene'>AND ANOTHER form here</div>

CSS

<style>
    div.form {
        display: none;
    }
</style>

的JavaScript

<script>
$('document').ready(function() {
    $('.valami').change(function() {
        id = $('select.valami option:selected').val();

        $('div.form').hide();
        $('div#' + id).show();
    });
});
</script>

Answer 2

如果我理解你的问题你需要隐藏所有其他类别。你看过:not() selector了吗？例如

if($('.film').is(':hidden')) {
 $('.film').show();
 $('div:not(.film)').hide();
}

选择类别

2 个答案: