Question

我正在尝试在wordpress中运行一个简单的jQuery函数来隐藏和显示内容，具体取决于下拉列表，代码在wordpress之外工作正常，但是当我将它添加到我的子主题时显示所有内容。我检查了标题并正确加载了jQuery文件。

jQuery(document).ready(function() {
    $('#id_BJ').closest('article').addClass('city_table').hide();
    $('#id_SH').closest('article').addClass('city_table').hide();
    $('#id_SZ').closest('article').addClass('city_table').hide();

    $('#id_chinese_city').change(function() {
        $('article.city_table').hide();
        $('#id_' + $(this).val()).closest('article').show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="chinese_city" id="id_chinese_city">
<option value="">Choose first</option>
<option value="BJ">Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<article id="id_BJ">
    </br>
    <h3>Beijing</h3></article>
<article id="id_SH">
    </br>
    <h3>Shanghai</h3></article>
<article id="id_SZ">
    </br>
    <h3>Shenzhen</h3></article>

我也试过使用标签，但结果是相同的

为什么会发生这种情况的任何想法？

Answer 1

更改

jQuery(document).ready(function() {

为：

jQuery(document).ready(function($) {

Wordpress默认以安全模式运行jQuery。更改上面的行，您应该可以正常使用代码中的$。

另一种选择如下：

(function($) {
    //Code here
})( jQuery );

Answer 2

我认为可能是因为你在安全模式下使用$ with jquery，你能做什么改变你的功能

jQuery(document).ready(function($) {
    $('#id_BJ').closest('article').addClass('city_table').hide();
    $('#id_SH').closest('article').addClass('city_table').hide();
    $('#id_SZ').closest('article').addClass('city_table').hide();

    $('#id_chinese_city').change(function() {
        $('article.city_table').hide();
        $('#id_' + $(this).val()).closest('article').show();
    });
});

它应该允许你传递$，它应该使你的功能工作。

看看我的文件。已经和你的相关，看看我在说什么。

Answer 3

WordPress在noConflict模式下使用jQuery。

以上解决方案应该有效。

但是如果你看一下APPI Doc，这应该会更清楚 - https://api.jquery.com/jquery.noconflict/

jQuery功能不在wordpress中工作

3 个答案: