Wordpress 自定义插件后端复选框在前端更改 css

Question

I am developing a custom plugin and I am pretty much done with it, my only problem right now is taking data from a script that is enqueued both in the Admin and frontend but it does not work as I thought it would. So, I have created a couple of checkboxes in the admin panel of the plugin and I want when someone clicks one of the checkboxes to change CSS from a div to make it look like the example image above the checkbox.

my code:

function vsuc_page_html() { ?>
<div class="wrap vsuc-wrapper">
    <form method="post" action="options.php">
        <?php settings_errors() ?>
        <?php settings_fields('vsuc_option_group'); ?>
  <?php echo '<h3 class="header_admin">Viorel Stanciu User Counter Plugin</h3>'; ?>
        <label class="label_text" for="vsuc_field_eat">Text Label:</label>
        <input name="vsuc_text_field" id="vsuc_field_eat" type="text" value=" <?php echo get_option('vsuc_text_field'); ?> "><br>
    <input type="checkbox" id="vsuc_checkbox1" name="vsuc_checkbox1" value="style1">
    <label for="checkbox1"><img src="<?php echo plugin_dir_url( __FILE__ ); ?>/img/style1.PNG" class="style1"></label>
    <input type="checkbox" id="checkbox2" name="vsuc_checkbox2" value="style2">
    <label for="checkbox2"><img src="<?php echo plugin_dir_url( __FILE__ ); ?>/img/style2.png" class="style1"></label>
        <?php echo '<p class="shortcode"> Insert this shortcode where you want to display the plugin: [pagehits]';
     submit_button(); ?>
    </form>
</div>

function vsuc_register_settings() {
    register_setting('vsuc_option_group', 'vsuc_text_field');
    register_setting('vsuc_option_group', 'vsuc_checkbox1');
}

The checkboxes appear correctly, but they are not doing anything.

Test script:

$(document).ready(function () {
    $('#vsuc_checkbox1').change(function () {
        var x = document.getElementsByClassName("visitor_count");
        if (this.checked) {
            x.style.display = "none !important";
        } else {
            x.style.display = "block !important";
        }
    })
});

Any help or hint would be much appreciated.

Answer 1

It appears that you are using jQuery. If your goal is to keep it in your project. I suggest to use some of its methods in order to tidy up your code.

I don't know how familiar you are with javascript but when you use getElementsByClassName() the return value is going to be a collection of javascript objects. This means that in order to target any of your .visitor_count and access it's style attribute you need to target one of the object in the collection. If you only have one .visitor_count you may as well use x[0] to target the first element in the collection since it's the only one.

The jQuery way of doing this would look like this:

$(function () {
   $("#vsuc_checkbox1").change(function () {
      let x = $(".visitor_count");
      if (this.checked) {
         x.hide();
      } else {
         x.show();
      }
   });
});

Personal tip, starting a variable name with a dollar sign when it is containing a jQuery object (for example using let $x instead of let x ) is a great way to tell when to use jQuery methods on a variable instead of plain javascript.