在切换按钮中执行简码答案

【问题标题】：Execute shortcode in a toggle button在切换按钮中执行简码
【发布时间】：2020-07-20 04:09:40
【问题描述】：

在 WordPress 网站中，我有一个短代码，它通过链接更新表单的字段（更新数据库中条目的值）。

我的第一个简码（将值更新为是）：[entry-update-field id=[id] field_id=208 value="Yes" label="List your entry!" class="classmadevisible"] -> WordPress 页面的结果是：List your entry!

我的第二个简码（将值更新为否）：[entry-update-field id=[id] field_id=208 value="No" label="Stop list your entry!" class="classnotvisible"] -> WordPress 页面的结果是：Stop list your entry!!

如果我单击此链接，它会将数据库中字段（条目）的值更新为是或否。

我的问题是：可以通过切换按钮执行此短代码（链接）吗？如果切换不活动则执行否（第二个简码），如果切换按钮处于活动状态则执行是（第一个简码）。

    .onoffswitch {
        position: relative; 
        width: 45px;
        -webkit-user-select:none; 
        -moz-user-select:none; 
        -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; 
        overflow: hidden; 
        cursor: pointer;
        height: 16px; 
        padding: 0; 
        line-height: 16px;
        border: 0px solid #CCCCCC; 
        border-radius: 26px;
        background-color: #E0E0E0;
    }
    .onoffswitch-label:before {
        content: "";
        display: block; 
        width: 26px; 
        margin: -5px;
        background: #F70303;
        position: absolute; 
        top: 0; 
        bottom: 0;
        right: 25px;
        border-radius: 26px;        
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label {
        background-color: #E0E0E0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
       border-color: #E0E0E0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
        right: 0px; 
        background-color: #3DA10F;        
    }

    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch"></label>
    </div>

【问题讨论】：

标签： jquery html css wordpress shortcode

【解决方案1】：

这是很肮脏的方式，但是：

    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch"></label>

        <div class="state-shortcodes" style="display: none">
                <div class="on-state-shortcode">
                        <?php echo do_shortcode('[entry-update-field id=[id] field_id=208 value="Yes" label="List your entry!" class="classmadevisible"]'); ?>
                </div>
                <div class="off-state-shortcode">
                        <?php echo do_shortcode('[entry-update-field id=[id] field_id=208 value="No" label="Stop list your entry!" class="classnotvisible"]'); ?>
                </div>
        </div>

    </div>

<script type="text/javascript">
jQuery(function($){
    $('.onoffswitch').on('input.onoffswitch-checkbox', 'change', function(){
        let state = $(this).prop("checked") == true ? 'on' : 'off';
        $(this).closest('.onoffswitch').find('.' + state + '-state-shortcode a').trigger('click');
    })
});
</script>

【讨论】：