jQuery函数在Wordpress中不起作用 [英] jQuery fuction not working in wordpress

问题描述

我试图在wordpress中运行一个简单的jQuery函数以根据下拉列表隐藏和显示内容，该代码在wordpress外部运行良好，但是当我将其添加到我的子主题中时，会显示所有内容.我已经检查了标头，并且jQuery文件已正确加载.

I'm trying to run a simple jQuery function in wordpress to hide and show content depending on a drop-down list, the code works fine outside wordpress, but when I add it to my child theme display all the content. I've checked the header and the jQuery file is loaded properly.

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>

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

I've also tried to using tags but the result is the same

为什么会这样?

推荐答案

我认为这可能是因为您在安全模式下将$与jquery一起使用时，您可以执行的操作改变了这样的功能

I think it may be because you are using the $ with jquery in safe mode, what you can do it change your function like this

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();
    });
});

它应该允许您传递$，并且应该可以使函数正常工作.

and it should allow you to pass the $ and it should make your function work.

看看我的document.ready行vs你的行，看看我在说什么.

Look at my document.ready line vs yours to see what i'm talking about.

这篇关于jQuery函数在Wordpress中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！