Question

我有一个下拉列表，其中包含默认选项和其他3个选项。我想根据选择隐藏和显示div。如果选择是默认值，则所有div都应该可见。否则，根据选择，div应显示或隐藏。但是我的jQuery代码似乎不起作用。我不知道为什么。这是代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script>
<script>
    $(document).ready(function(){
        $('#purpose').on('change', function() {
            if ( this.value == '1')
            {
                $(".partition").show();
            }
            else
            {
                $(".partition").hide();
            }
        });
    });
</script>

html代码是

<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">
    <option selected><b>Type de matériel</b></option>
    <option value="1">Poster</option>
    <option value="2">Books</option>
    <option value="3">Audio</option>
</select>
<div class="partition">
    <?php the_field('poster_heading_1'); ?>
    <?php 
        $image = get_sub_field('partition_image');
        if( !empty($image) ):
            ?>
                <a href="<?php the_sub_field('partition_pdf'); ?>" target="_blank"> 
                    <img src="<?php echo $image['url']; ?>">
                </a>
            <?php  the_sub_field('partition_text'); ?>
        <?php endif; ?>
</div>

Answer 1

这应该有效，只是纠正了一些jquery

 <script>
$(document).ready(function(){
$('#purpose').change(function() {
if ( $(this).val() == '1')
{
$(".partition").show();
}
else
{
$(".partition").hide();
}
});
});
</script>

Answer 2

如果我理解正确，你应该像你说的那样有3个分区div工作，每个div应该有你想要显示的id数等于select选项值。检查此代码，然后告诉我这是否是您需要的。

jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script>
<script>
    $(document).ready(function(){ 
        $('#purpose').on('change', function() { 
            var val = $(this).val();
            console.log(val);
            if ( val == '0' ) { 
                $(".partition").show(); 
            } else { 
                $(".partition").hide(); 
                $("#partition-" + val).show(); 
            } 
        }); 
    }); 
</script>

HTML：

<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">
    <option selected value="0"><b>Type de matériel</b></option>
    <option value="1">Poster</option>
    <option value="2">Books</option>
    <option value="3">Audio</option>

</select>


<div class="partition" id="partition-1">
    <?php the_field('poster_heading_1'); ?>
    <?php 
    $image = get_sub_field('partition_image');
    if( !empty($image) ):
        ?>
    <a href="<?php the_sub_field('partition_pdf'); ?>" target="_blank"> <img src="<?php echo $image['url']; ?>"> </a>
    <?php  the_sub_field('partition_text'); ?>
<?php endif; ?>
</div>

使用jQuery和ACF显示/隐藏Div

2 个答案: