Show/Hide 使用 jQuery 和 ACF 的 Div

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>

Show/Hide 使用 jQuery 和 ACF 的 Div

Show/Hide Divs using jQuery and ACF

html

php

wordpress

jquery

advanced-custom-fields