Изменить CSS, если определенные пользовательские мета-блоки отмечены - PullRequest
Новая
       7

Изменить CSS, если определенные пользовательские мета-блоки отмечены

0 голосов
/ 11 сентября 2018

У меня есть пользовательские мета-блоки, которые отображают div inline-block при проверке, поэтому у меня есть код, который говорит, что если мета-бокс include_freq_flyer2 установлен, то он отображает содержимое в связанных пользовательских мета-боксах, если включены include_freq_flyer2 и freq_flyer3, он отображает обаи т.д. до freq_flyer6.Это работает нормально, но мне нужно иметь возможность изменять ширину div freq_flyer в зависимости от того, какие флажки установлены, поэтому, если установлены первые 3 поля, которые будут мета-полями freq_flyer2 и freq_flyer3, то измените ширину div freq_flyer на 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>
...