Question

我想开始这个问题，说是的，我已经访问了其他类似的问题。我已经对此进行了一段时间的故障排除，最后决定我的问题还有其他问题。所以我们走了。

我从这里的人那里获得了这个代码，这个代码在Jsfiddle中运行得很好，我想把它添加到我的网站上。我是一个巨大的菜鸟，并且不知道我在javascript方面做了什么，但我开始学习。这是代码，以及它没有使用的网站页面。

jQuery(document).ready(function($) {
  $('#filterDiv').on("change keyup", function() {
    chkBox = {
      datatest: null
    };

    if ($('#3').is(':checked')) {
      chkBox.datatest = "1";
    } else {
      chkBox.datatest = "";
    }

    $("p").hide().filter(function() {
      var rtnData = "";

      regExName = new RegExp($('#0').val().trim(), "ig");
      regExA = new RegExp($('#1').val().trim(), "ig");
      regExB = new RegExp($('#2').val().trim(), "ig");
      regExTest = new RegExp(chkBox.datatest, "ig")

      rtnData = (
        $(this).attr("data-name").match(regExName) &&
        $(this).attr("data-a").match(regExA) &&
        $(this).attr("data-b").match(regExB) &&
        $(this).attr("data-test").match(regExTest)
      );

      //console.log(rtnData);
      return rtnData;
    }).show();
  });
});

.mySel {
  width: 100px;
  padding: 10px;
}

.myInput {
  width: 150px;
  padding: 10px;
  margin-bottom: 5px;
}

.ps {
  padding: 30px;
  background-color: #0072ff;
  color: white;
  font-weight: 700;
}

.aBlue {
  border: 4px solid blue;
}

.bYellow {
  border: 4px solid yellow;
}

.cGreen {
  border: 4px solid green;
}

.eagle {
  border-radius: 0 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="filterDiv">
  <input type="text" class="myInput" id="0" />

  <select class="mySel" id="1">
    <option value="">Session</option>
    <option value="1">1st</option>
    <option value="2">2nd</option>
    <option value="3">3rd</option>
    <option value="4">4th</option>
  </select>

  <select class="mySel" id="2">
    <option value="">Area</option>
    <option value="beach">Beach</option>
    <option value="tower">Tower</option>
    <option value="ods">Outdoor Skills</option>
    <option value="fca">First Class Adventure</option>
    <option value="central">Central Program</option>
    <option value="hc">Handicrafts</option>
    <option value="nc">Nature Center</option>
    <option value="sc">South Commissioner</option>
    <option value="range">Rifle/Shotgun Range</option>
  </select>

  <input type="checkbox" id="3"> Eagle Required?
</div>
<p class="ps bYellow eagle" data-name="camping" data-a="12" data-b="central" data-test="1">Camping 2SESSION</p>
<p class="ps cGreen" data-name="climbing" data-a="23" data-b="tower" data-test="">Climbing 2SESSION</p>
<p class="ps cGreen" data-name="pioneering" data-a="3" data-b="ods" data-test="">Pioneering</p>
<p class="ps aBlue eagle" data-name="swimming" data-a="4" data-b="beach" data-test="1">Swimming</p>
<p class="ps bYellow eagle" data-name="weather" data-a="1" data-b="nc" data-test="">Weather</p>
<p class="ps cGreen" data-name="woodcarving" data-a="2" data-b="hc" data-test="">Woodcarving</p>

以下是问题网页：http://35.184.94.78/index.php/programs/archery-range/ 当您选择任何选项或输入搜索时，所有内容都会消失，并且您会收到“无法读取属性'匹配'未定义”错误。我见过很多有这个问题的人都有错误的语法，但它在JSfiddle中运行正常，所以我不认为错误是实际问题。

这是令人困惑的部分，Wordpress，如果你曾经使用它，对于添加脚本真的很挑剔。所以我安装了一个名为Scripts n'Styles的插件，它可以非常轻松地添加代码，只需一个下拉列表即可调用jQuery。我学到的另一件事是这个代码必须在页面加载后加载，所以我确保在/ body标签之后插入它。此外，Wordpress不喜欢jQuery“$”，他们希望你说“jQuery”。所以我发现如果你把它包装在“jQuery（document）.ready（function（$）{”那么它会正常运行。

我开始时没有做任何事情，但经过所有这些奇怪的修复后，它终于做了一些事情，但不幸的是，有些事情正在发生错误并完全消失。

这是我的最后一次领导。我认为它与正在加载的jquery的冲突版本有关，因为我有一些使用jquery的其他插件。所以我的下一个攻击是尝试在加载这个版本之前尝试取消注册其他jquery版本，但是我无法弄清楚如何在Wordpress中做到这一点，更不用说做得好了所以其他插件不受影响。 / p>

过去3个月我一直在W3Schools学习所有这些，所以如果这是一个愚蠢的问题我很抱歉。我一直试图让这个工作，所以抱歉愚蠢的数据名称和类名。

Answer 1

我已经弄清楚了，我应该只使用一个类选择器。我试图使用ID选择器，但那也不起作用。我所做的就是将$（＆＃39; p＆＃39;）更改为$（＆＃39; .ps）来选择ps类而不是所有p元素。

JQuery在Wordpress中无法正常运行

1 个答案: