Выполнить шорткод в кнопке переключения - PullRequest
Новая
       8

Выполнить шорткод в кнопке переключения

0 голосов
/ 07 апреля 2020

На веб-сайте WordPress у меня есть шорткод, который обновляет поле формы по ссылке (обновить значение записи в базе данных).

Мой первый шорткод (обновить значение до Да): [entry-update-field id=[id] field_id=208 value="Yes" label="List your entry!" class="classmadevisible"] -> Результат на странице WordPress: Зарегистрируйте свою запись!

Мой второй шорткод (измените значение на Нет): [entry-update-field id=[id] field_id=208 value="No" label="Stop list your entry!" class="classnotvisible"] -> Результат на странице WordPress: Перестать перечислять вашу запись !!

Если я нажму на эту ссылку, это обновит значение поля (записи) в базе данных до Да или

Мой вопрос: возможно ли выполнить этот шорткод (ссылки) с помощью кнопки переключения? Если переключатель не активен для выполнения Нет (второй короткий код), и если кнопка переключения активна, чтобы выполнить Да (первый короткий код). 

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

1 Ответ

0 голосов
/ 08 апреля 2020

Это очень грязный способ, но: 

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