Question

让我先说一下这与 Wordpress 页面有关。我对JS的了解最多，并且在网站的一个区域安装/加载/排队函数然后在网站的另一个区域调用该函数的概念是我头脑中有意义的东西但非常在实践中对我来说是新的，可能需要一点解释。

我有两个单独的javascript文件，我想在一个页面上加载，但根据单选按钮输入切换可见性/显示。 JS由第三方提供，不在现场。他们提供的代码如下：

<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>

和

<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>

每个文件都会从其数据库中显示一组单独的过滤结果。如何将两者合并到页面上，但只有一个或另一个基于单选按钮表单输入显示？我希望页面从没有任何可见的开始（希望为用户选择一个选项时让JS加载到后台），然后根据他们选择的内容显示一个或另一个。

您可以在http://pricelesspetrescue.org/adoptable-dogs/看到其中一个正在执行。我试图根据用户的输入在同一页面上使用其他文件，只显示一个或另一个而不是两者。

我试图管理以下

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
    if (c.value == "2") {    
        jQuery('#claremontdogContainer').toggle('show');
        jQuery('#chdogContainer').hide();
    }
        if (c.value == "1") {
         jQuery('#chdogContainer').toggle('show');
         jQuery('#claremontdogContainer').hide();
    }
};
</script>


<label>Please select a location to view:</label>
<form>
    <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
    <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>

    <div style="display:none" id="chdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>    
    <script type="text/javascript"> 
    </script>
    </div>

<!-- If I uncomment this second block the whole thing breaks
    <div style="display:none" id="claremontdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>    
    <script type="text/javascript"> 
    </script>
    </div>
-->

这非常接近我需要的东西。我遇到的问题是第二个脚本加载似乎与它们在脚本中提供的函数冲突。它将显示初始结果，但不具有它应具有的任何功能。 http://pricelesspetrescue.org/test-page/这些结果中没有任何内容可以点击，应该是。

正在搜索各种类似的帖子和wordpress codex以及......而且......我还没有能够想出任何看起来与我正在寻找的东西相近的东西答案点击我的脑袋。

编辑：似乎如果我只加载上面提到的其中一个脚本或下面建议的答案，加载时会出现所有功能。它是加载破坏页面的第二个工具包脚本。我猜测一个人需要加载然后卸载才能加载第二个才能工作。有什么想法吗？

Answer 1

你链接的toolkit.js文件向DOM添加了一些常见的脚本（通过document.write函数，这不是一个好的解决方案 - 参见这里：http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/），然后填充一个数组（toolkitObjects）每个文件自定义的一系列变量，最后加载一些其他脚本。

似乎每个文件都加载一个div，其中包含一个包含所有宠物的特定类，每个div都可以通过特定类识别（＆＃34; rgtk-SOMEID＆＃34;），因此可以通过显示/隐藏的JavaScript。

以下是使用div类可以获得的示例：

http://jsbin.com/loneyijuye/edit?html,output

在同一个Wordpress页面上切换单独的Javascript文件的可见性

1 个答案: