doujian3401 2016-03-31 22:00
浏览 95

jQuery就绪功能无法正常工作

So basically, I have 2 pictures, and below I have a selection of choices, 5 choices that each hold the value 1-5. I want the picture to change depending on my option choice.

test2.php

<?php
                        echo "<form action='./test2.php' method='post'>
                            <select id='tier' name='tier' style='width:100%;'>
                                <option value='1'>Bronze</option>
                                <option value='2'>Silver</option>
                                <option value='3'>Gold</option>
                                <option value='4'>Platinum</option>
                                <option value='5'>Diamond</option>
                            </select>
                            <select name='division' style='width:100%;'>
                                <option value='1'>I</option>
                                <option value='2'>II</option>
                                <option value='3'>III</option>
                                <option value='4'>IV</option>
                                <option value='5'>V</option>
                            </select>
                            <select name='lp' style='width:100%;'>
                                <option value='1'>0-20</option>
                                <option value='2'>21-40</option>
                                <option value='3'>41-60</option>
                                <option value='4'>61-80</option>
                                <option value='5'>81-100</option>
                            </select>
                            <input type='hidden' name='product_id' value='1' />
                            <input type='submit' name='add_to_cart' value='Add to cart' style='width:206%;'/>
                  </div>
                </div>
              </div>";

              echo '<div class="col-md-3 col-sm-6" style="width:50%;">
                <div>
                  <div class="item-icon">
                    <img name="postTier" id="postTier" src="images/bronze_rank.png" style="width:100%"></img>
                    <p style="line-height: 60px;">Your finished division</p>
                  </div>
                  <div class="item-details">';
                            echo "<select name='post_tier' style='width:100%;'>
                                <option value='1'>Bronze</option>
                                <option value='2'>Silver</option>
                                <option value='3'>Gold</option>
                                <option value='4'>Platinum</option>
                                <option value='5'>Diamond</option>
                            </select>
                            <select name='post_division' style='width:100%;'>
                                <option value='1'>I</option>
                                <option value='2'>II</option>
                                <option value='3'>III</option>
                                <option value='4'>IV</option>
                                <option value='5'>V</option>
                            </select>
                        </form>";
                        ?>

Don't worry about the divs and so on inbetween the code, I have a lot of more html code above the php tag.

Before the end of my html, this is how my javascript code looks like:

<script>
    $(document).ready(function(){
   $("#tier").change(function(){
    switch($(this).val()) {
        case 0:
           newsrc = 'images/bronze_rank.png';
            break;
        case 1:
            newsrc = 'images/silver_rank.png';
            break;
        case 2:
           newsrc = 'images/gold_rank.png';
            break;
        case 3:
            newsrc = 'images/platinum_rank.png';
            break;
        case 4:
           newsrc = 'images/diamond_rank.png';
            break;
    }
     $("#preTier").attr("src",newsrc);

    });

    });
    </script>

    <script>
    $(document).ready(function(){
   $("#post_tier").change(function(){
    switch($(this).val()) {
        case 0:
           newsrc = 'images/bronze_rank.png';
            break;
        case 1:
            newsrc = 'images/silver_rank.png';
            break;
        case 2:
           newsrc = 'images/gold_rank.png';
            break;
        case 3:
            newsrc = 'images/platinum_rank.png';
            break;
        case 4:
           newsrc = 'images/diamond_rank.png';
            break;
    }
     $("#postTier").attr("src",newsrc);

    });

    });
    </script>

</body>
</html>

The image never changes on either of the two pictures. EDIT: I'd like to add that the $(document).ready function never gets called because I've logged it. I don't understand why it doesn't get called when I change the options over and over again.

EDIT: Picture after getting some help Nothing happens

Some Extra stuff down here:

 <!-- Include jQuery Js -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.2.min.js"><\/script>')</script>
  <script src="assets/js/wow.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <!-- Gmap3.js For Static Maps -->
  <script src="assets/js/gmap3.js"></script>
  <!-- Include Waypoint Js -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  <!-- Include Ajax MailChimp Js -->
  <script src="assets/js/jquery.ajaxchimp.min.js"></script>
    <!-- Include Custom Js </-->
  <script src="assets/js/custom.min.js"></script>

wow.min.js

  (function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);
  • 写回答

1条回答 默认 最新

  • drduh44480 2016-03-31 22:47
    关注

    So first check solution with your dummy data: https://jsfiddle.net/g3vczzqh/1/

    I pasted some javascript that will solve your problem and I simplified your script a bit, you could of course further improve this. Also check comments inside code they are most helpful. There were quite a few issues with your code.

    first you need to change select for post_tier you're missing id there:

    <select name='post_tier' id="post_tier" style='width:100%;'>
    

    then you didn't initialize newsrc variable, and your values were string so you had to parseInt before switch statement, and you had 0 in your switch statement and you have no 0 value in your select options (you do have 5 though). Also there is no need to write code twice, you could make some function out of it or simplify it a bit like in my example.

        $(document).ready(function(){
        // initialize variables
       var newsrc, imgId;
       // you can add both ids in one change, but you're missing id in html select
       $("#tier, #post_tier").change(function(){
      // this is simple string check of id
      console.log($(this).attr('id'))
        if($(this).attr('id')==="tier"){
         imgId="#preTier";
      }else{
         imgId="#postTier";
      }
       // you need parseInt because your .val() numbers are actually strings
        switch(parseInt($(this).val())) {
                // you don't have value of 0 but you have value of 5
            case 5:
               newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
                break;
            case 1:
                newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png';
                break;
            case 2:
               newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png';
                break;
            case 3:
                newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/cat.png';
                break;
            case 4:
               newsrc = 'https://homepages.cae.wisc.edu/~ece533/images/peppers.png';
                break;
        }
         // just take that id and add newsrc
         $(imgId).attr("src",newsrc);
    
        });
    
        });
    
    评论

报告相同问题?

悬赏问题

  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。