(在WordPress论坛上发布了这篇文章,但回复通知进入了我的垃圾邮件文件夹,所以现在它已不再被关注。)
我在网站的侧边栏中有三个下拉菜单,可以按产品线的类别创建视图:按型号、生产年份或状态。其中每一个都只是拉取特定类别中的帖子,并重定向到存档页面以显示列表。
每个变量和函数都有唯一的名称,每个都有效……但只有当它放在侧边栏的第一位时才有效。另外两个,无论是哪一个,都不会起作用。改变他们的位置总是会导致先到的一个工作,而另外两个则不起作用。
我还尝试复制整个函数(wp_dropdown_categories()
, 从…起wp-includes/category-template.php
), 将其粘贴到我的functions.php
文件三次,并自定义每一次,这样菜单就不会调用相同的函数。还是不行。
无论如何,这是该部分的全部代码:
<div class="sidebarItem">
<h4>Model Type</h4>
<?php wp_dropdown_categories(\'show_option_none=Select model type&include=18,19,20,21\'); ?>
<script type="text/javascript"><!--
var dropdownModel = document.getElementById("cat");
function onCatChangeModel() {
if ( dropdownModel.options[dropdownModel.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownModel.options[dropdownModel.selectedIndex].value;
}
}
dropdownModel.onchange = onCatChangeModel;
--></script>
</div>
<div class="sidebarItem">
<h4>Year Produced</h4>
<?php wp_dropdown_categories(\'show_option_none=Select year produced&include=7,8,9,10,11,12,13,14,15,16,17\'); ?>
<script type="text/javascript"><!--
var dropdownYear = document.getElementById("cat");
function onCatChangeYear() {
if ( dropdownYear.options[dropdownYear.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownYear.options[dropdownYear.selectedIndex].value;
}
}
dropdownYear.onchange = onCatChangeYear;
--></script>
</div>
<div class="sidebarItem">
<h4>Identified/Unidentified</h4>
<?php wp_dropdown_categories(\'show_option_none=Select status&include=22,23\'); ?>
<script type="text/javascript"><!--
var dropdownStatus = document.getElementById("cat");
function onCatChangeStatus() {
if ( dropdownStatus.options[dropdownStatus.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownStatus.options[dropdownStatus.selectedIndex].value;
}
}
dropdownStatus.onchange = onCatChangeStatus;
--></script>
</div>
同样,这些作品中的每一个,只是不在同一页上。有人知道这里发生了什么吗?
SO网友:Dave Romsey
原始代码不起作用的原因是因为每个类别下拉列表<select>
元素的HTML id为cat
. JavaScript狙击手正在寻找ID为的元素cat
, 但是有三个。ID在标记中应始终是唯一的。
wp_dropdown_categories()
允许自定义id,因此我们可以在每个类别下拉列表中添加唯一的id,并对JS进行适当的调整:
<div class="sidebarItem">
<h4>Model Type</h4>
<?php wp_dropdown_categories(\'show_option_none=Select model type&include=18,19,20,21&id=model_type\'); ?>
<script type="text/javascript"><!--
var dropdownModel = document.getElementById("model_type");
function onCatChangeModel() {
if ( dropdownModel.options[dropdownModel.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownModel.options[dropdownModel.selectedIndex].value;
}
}
dropdownModel.onchange = onCatChangeModel;
--></script>
</div>
<div class="sidebarItem">
<h4>Year Produced</h4>
<?php wp_dropdown_categories(\'show_option_none=Select year produced&include=7,8,9,10,11,12,13,14,15,16,17&id=year_produced\'); ?>
<script type="text/javascript"><!--
var dropdownYear = document.getElementById("year_produced");
function onCatChangeYear() {
if ( dropdownYear.options[dropdownYear.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownYear.options[dropdownYear.selectedIndex].value;
}
}
dropdownYear.onchange = onCatChangeYear;
--></script>
</div>
<div class="sidebarItem">
<h4>Identified/Unidentified</h4>
<?php wp_dropdown_categories(\'show_option_none=Select status&include=22,23&id=identified_status\'); ?>
<script type="text/javascript"><!--
var dropdownStatus = document.getElementById("identified_status");
function onCatChangeStatus() {
if ( dropdownStatus.options[dropdownStatus.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option(\'home\');
?>/?cat="+dropdownStatus.options[dropdownStatus.selectedIndex].value;
}
}
dropdownStatus.onchange = onCatChangeStatus;
--></script>
</div>