dongtu9823
dongtu9823
采纳率0%
2015-08-20 18:24

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

Let me preface by saying this is all in relation to a Wordpress page. My knowledge of JS is lacking at best and the concept of installing/loading/enqueueing a function on one area of the site and then calling that function in another area of the site is a something that makes sense to me in my head but is very new to me in practice and might need a little explaining.

I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:

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

and

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

Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input? I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.

You can see a single one of these in action at http://pricelesspetrescue.org/adoptable-dogs/. I'm trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.

I have tried to manage the following

<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>
-->

This gets pretty close to what I need. The problem I have is the second script load seems to conflict with the functions they provide in the script. It will display the initial result but does not carry any of the functionality that it should have. http://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.

Been searching through various similar posts and the wordpress codex and...and...I just haven't been able to come up with anything that seems close enough to what I'm looking for to make the answer click in my head.

Edit: It seems that if I only load one of the scripts in either what I have above or the suggested answer below, all functionality is present when loaded. It's the loading of the second toolkit script that is breaking the page. I'm guessing one would need to be loaded then unloaded before loading the second for it to work. Any ideas?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doulan1073 doulan1073 6年前

    The toolkit.js file you linked adds some common scripts to the DOM (via document.write function, which is not a good solution - see here: http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/), then populates an array (toolkitObjects) with a series of variables that are custom per file and finally loads some other scripts.

    It also seems that each file loads a div with a specific class containing all the pets, and each div is identifiable by a specific class ( "rgtk-SOMEID" ) and therefore can be shown/hidden via javascript.

    Here is an example of what you can obtain using the div class:

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

    点赞 评论 复制链接分享

为你推荐