当用户从下拉菜单中选择时,使用不同的快捷码重新加载页面

时间:2019-06-10 作者:MAR

我使用的是WP作业管理器,列出所有可用作业的页面使用可自定义的短代码交付。

所以[jobs per_page="10"] 在前端输出为:

<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" 
data-show_pagination="true" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
我想在该页面中添加一个下拉列表,允许访问者选择每页显示多少列表。

我想做的是创建一个下拉列表,当用户选择一个选项时,页面会重新加载一个不同的短代码。例如:

<select>
    <option value="10">10</option> // page reloaded with [jobs per_page="10"]
    <option value="20">20</option> // page reloaded with [jobs per_page="20"]
    <option value="30">30</option> // page reloaded with [jobs per_page="30"]
</select>
我的问题是,使用一些<select onchange="someAction">, 还是有更好的解决方案?

1 个回复
最合适的回答,由SO网友:majick 整理而成

您可以创建一个自定义短代码包装器,该包装器将使用所需的属性执行短代码,因此您可以使用[jobs-custom] 在页面中:

add_shortcode(\'jobs-custom\', \'custom_jobs_shortcode\');
function custom_jobs_shortcode($atts) {
    if (is_user_logged_in()) {
         $per_page = get_user_meta(get_current_user_id(), \'jobs-per-page\', true);
    }
    if (!isset($per_page) || !$per_page) {
       if (isset($_COOKIE[\'jobs-per-page\'])) {$per_page = $_COOKIE[\'jobs-per-page\'];}
       else {$per_page = 10;}
    }
    return do_shortcode(\'[jobs per_page="\'.$per_page.\'"]\');
}
然后添加一个早期操作以检查querystring值并设置用户元/cookie。。。

add_action(\'init\', \'custom_set_jobs_per_page\');
function custom_set_jobs_per_page() {
    if (isset($_REQUEST[\'jobs-per-page\'])) {
        $per_page = absint($_REQUEST[\'jobs-per-page\']);
        if ($per_page > 10) {
            if (is_user_logged_in()) {update_user_meta(get_current_user_id(), \'jobs-per-page\', $per_page);}
            else {setcookie(\'jobs-per-page\', $per_page, (time()+(7*24*60*60);}
        }
    }
}
有了它,您可以添加javascriptonchange 功能到您的<select> 输入:

<script>function change_jobs_per_page() {
    el = document.getElementById(\'jobs-per-page-select\');
    perpage = el.options[el.selectedIndex].value;
    href = window.location.href;
    if (href.indexOf(\'jobs-per-page=\') > -1) {
        href = href.split(\'jobs-per-page=\');
        window.location.href = href[0]+\'jobs-per-page=\'+perpage;
    } else if (href.indexOf(\'?\') > -1) {
        window.location.href = href+\'&jobs-per-page=\'+perpage;
    } else {
        window.location.href = href+\'?jobs-per-page=\'+perpage;
    }
}</script>
<select id=\'jobs-per-page-select\' onchange=\'change_jobs_per_page();\'>
这种方法的优点是,新的每页值是持久的,直到用户更改为止(或者用户cookie过期)

相关推荐

JavaScript/PHP-结束循环

我在PHP文件中嵌入了一个HTML表单,其中有一个onclick按钮,可以调用javascript函数。<form name=\"addStamp\"> Validation Code:<br> <input type=\"number\" name=\"inputcode\"><br> <input type=\"text\" name=\"message\" id=\"message\"><