donglu953744
2017-07-28 15:29
浏览 30
已采纳

使用jQuery和ACF显示/隐藏Div

I have a dropdown list with a default and additional 3 options. I want to hide and show the divs based on the selection. If the selection is default all the divs should be visible. Otherwise based on the selection, the divs should show or hide. However my jQuery code doesn't seem to work. I have no clue why. Here is the code.

<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>

And the html code is

<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>

图片转代码服务由CSDN问答提供 功能建议

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

 &lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js  “取代。  &lt; / script&gt; 
&lt; script&gt; 
 $(document).ready(function(){
 $('#purpose')。on('change',function(){
 if(this.value)  =='1')
 {
 $(“。partition”)。show(); 
} 
 else 
 {
 $(“。partition”)。hide(); 
} \  n}); 
}); 
&lt; / script&gt; 
   
 
 

html代码是

 &lt; select id =“purpose”style =“width:33%; height:50px; border:0px; background:#dadada; font-size:x-large;”&gt; 
&lt;选择的选项&gt;&lt;  b&gt; Typedematériel&lt; / b&gt;&lt; / option&gt; 
&lt; option value =“1”&gt; Poster&lt; / option&gt; 
&lt; option value =“2”&gt; Books&lt; / option&gt; 
  &lt; option value =“3”&gt;音频&lt; /选项&gt; 
&lt; / select&gt; 
&lt; div class =“partition”&gt; 
&lt;?php the_field('poster_heading_1');  ?&gt; 
&lt;?php 
 $ image = get_sub_field('partition_image'); 
 if(!empty($ image)):
?&gt; 
&lt; a href =“&lt;?php  the_sub_field('partition_pdf');?&gt;“ 目标= “_空白” &GT;  
&lt; img src =“&lt;?php echo $ image ['url'];?&gt;”&gt; 
&lt; / a&gt; 
&lt;?php the_sub_field('partition_text');  ?&gt; 
&lt;?php endif;  ?&gt; 
&lt; / div&gt; 
   
 
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongwen9947 2017-07-28 15:52
    已采纳

    If I understood correctly, you should have 3 partition div to work like you said, each div should have the id number equals select option value that you want to show. Check this code and let me say if this is what you need.

    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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dragon87836215 2017-07-28 15:36

    This should work, just corrected a bit of the jquery

     <script>
    $(document).ready(function(){
    $('#purpose').change(function() {
    if ( $(this).val() == '1')
    {
    $(".partition").show();
    }
    else
    {
    $(".partition").hide();
    }
    });
    });
    </script>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题