javascript - 将输入字段中的值传递给Wordpress中的php函数?
问题描述
当我从下拉菜单中选择类别时,它会在输入字段中正确更新。理想情况下,它应该更新 recipeIndex.php 中的配方过滤器。
我试过用“get”方法将输入包装在一个表单中,但这仍然不起作用。
HTML 位于“食谱索引”页面上的 HTML 小部件中。CSS、JavaScript 和 PHP 代码位于不同的片段中(我使用了 Woody Snippets Wordpress 插件https://wordpress.org/plugins/insert-php/)
请帮忙。
HTML
<div class="dropdown_container">
<div class="dropdown">
<div class="select">
<span class="select_span">Select Category</span>
<i class="fa fa-chevron-down"></i>
</div>
<form action="" method="get">
<input type="hidden" name="category" id="category">
</form>
<ul class="dropdown-menu" id="recipeDropdown">
<li id="All" name="All" value="All">All</li>
<li id="Vegan" name="Vegan" value="Vegan">Vegan</li>
<li id="Vegetarian" name="Vegetarian" value="Vegetarian">Vegetarian</li>
</ul>
</div>
</div>
CSS
.dropdown_container {
width: 160px;
}
.select {
width: 160px;
}
/*Styling Selectbox*/
.dropdown {
width: 160px;
display: inline-block;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 0 2px rgb(204, 204, 204);
transition: all .5s ease;
position: relative;
font-size: 14px;
color: #474747;
height: 100%;
text-align: left
}
.dropdown .select {
cursor: pointer;
display: block;
padding: 10px;
}
.dropdown .select > i {
font-size: 13px;
color: #888;
cursor: pointer;
transition: all .3s ease-in-out;
float: right;
line-height: 15px
}
.dropdown:hover {
box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
box-shadow: 0 0 4px rgb(204, 204, 204);
border-radius: 2px 2px 0 0;
background-color: #f8f8f8
}
.dropdown.active .select > i {
transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
width: 100%;
position: absolute;
background-color: #fff;
left: 0;
margin-top: 1px;
box-shadow: 0 1px 2px rgb(204, 204, 204);
border-radius: 0 1px 2px 2px;
overflow: hidden;
display: none;
overflow-y: auto;
z-index: 9
}
.dropdown .dropdown-menu li {
transition: all .2s ease-in-out;
cursor: pointer
}
.dropdown .dropdown-menu {
padding: 0;
list-style: none
}
.dropdown .dropdown-menu li:hover {
background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
background-color: #e2e2e2
}
JavaScript
var $ = jQuery;
$('.dropdown').click(function () {
$(this).attr('tabindex', 1).focus();
$(this).toggleClass('active');
$(this).find('.dropdown-menu').slideToggle(300);
});
$('.dropdown').focusout(function () {
$(this).removeClass('active');
$(this).find('.dropdown-menu').slideUp(300);
});
$('.dropdown .dropdown-menu li').click(function () {
var value = $(this).attr("value");
$("input[name='category']").val(value);
$(this).parents('.dropdown').find('span').text($(this).text());
$(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
});
PHP
// Posts or Portfolio Widget
add_action( 'elementor/query/recipe-index-filter', function( $query ) {
// Modify the posts query here
$category = $_GET['category'];
$query->set( 'category_name', $category );
} );
解决方案
推荐阅读
- android - 运行模拟器时出错:没有足够的磁盘空间来运行 AVD
- java - 我可以使用 KeyListener 更改变量吗?
- python-3.x - 尽管安装了帮助程序,但导入帮助程序库时出错
- javascript - 数组不是函数(评估 'this.props.onPress(e)')
- string - 如何计算 Bash 中字符串中字符的出现次数
- sql - How to INSERT correctly in a VARRAY of TYPE OBJECT?
- blockchain - 如何解决solidity Remix中的类型错误
- amazon-web-services - AWS ASG 生命周期通知目标
- c# - 如何路由 401 和 403 错误?
- c++ - 您将如何嵌套结构?