Question

我有自定义的meta框，当选中时显示div inline-block，所以我有一段代码，说明是否选中了meta box include_freq_flyer2然后在相关的自定义meta框中显示内容，如果include_freq_flyer2和freq_flyer3被选中，则两者都显示直到freq_flyer6。这工作正常，但我需要根据选中的复选框来更改freq_flyer div的宽度，因此，如果选中了前三个将是元框freq_flyer2和freq_flyer3的框，则将freq_flyer div的宽度更改为33.3％如果选中了框2、3、4和5，则将其更改为20％，如果将所有六个框都选中，则宽度为33.3％。我不确定如何执行此操作，代码为：

    <?php if ($meta['include_frequentflyer']) { ?>
        <div class="frequent_flyer">
       <div class="freq_flyer" style="background-color:#2c3d55;">
               <div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title1']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy1']; ?></p>
               </div></div><!-- freq_flyer --><?php if ($meta['include_freq_flyer2']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy"><h4 class="serif"><?php echo $meta['frequent_flyer_content_title2']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy2']; ?></p>
               </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer2); ?><?php } ?><?php if ($meta['include_freq_flyer3']) { ?><div class="freq_flyer" style="background-color:#2c3d55;"><div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title3']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy3']; ?></p></div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer3); ?><!-- --><?php } ?><?php if ($meta['include_freq_flyer4']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title4']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy4']; ?></p></div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer4); ?><?php } ?><?php if ($meta['include_freq_flyer5']) { ?><div class="freq_flyer" style="background-color:#2c3d55;"><div class="freq_flyer_copy"> <h4 class="serif"><?php echo $meta['frequent_flyer_content_title5']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy5']; ?></p>      
         </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer5); ?><?php } ?><?php if ($meta['include_freq_flyer6']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy"> <h4 class="serif"><?php echo $meta['frequent_flyer_content_title6']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy6']; ?></p>      
         </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer6); ?><?php } ?>

        </div><!-- frequent_flyer -->

<?php echo wpautop($include_frequentflyer); ?>
    <?php } ?>

我能想到的唯一方法是以下方法，但我不确定如何将其合并：

    <script>    
        $meta('include_freq_flyer2, include_freq_flyer3').on('change', function () {

        if ($meta('include_freq_flyer2').is(':checked') && $('include_freq_flyer3').is(':checked')) {                                          
        $meta('.freq_flyer').css('width', '33.3%');
       } else {
        $meta('.freq_flyer').css('width', '25%');
       }
      });
      </script>

如果选中某些自定义元框，则更改CSS

0 个答案: