WP_DROPDOWN_CATEGORIES()脚本在侧边栏上不稳定地工作

时间:2017-01-23 作者:1db

(在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>
同样,这些作品中的每一个,只是不在同一页上。有人知道这里发生了什么吗?

1 个回复
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>