jQuery ready funktioniert nicht richtig

Question

Also im Grunde habe ich 2 Bilder, und unten habe ich eine Auswahl, 5 Auswahlmöglichkeiten, die jeweils den Wert 1-5 enthalten. Ich möchte, dass sich das Bild je nach meiner Wahl ändert.

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>"; 
         ?> 

Sie nicht über die divs kümmern und so weiter dazwischen den Code, ich habe über dem php-Tag viel mehr HTML-Code.

Vor dem Ende meiner html, ist dies, wie mein JavaScript-Code wie folgt aussieht:

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

Das Bild auf entweder nie von den beiden Bildern ändert. EDIT: Ich möchte hinzufügen, dass die $ (Dokument) .ready Funktion nie aufgerufen wird, weil ich es geloggt habe. Ich verstehe nicht, warum es nicht aufgerufen wird, wenn ich die Optionen immer wieder ändere.

EDIT: Bild nach etwas Hilfe bekommen Nothing happens

etwas Extra Sachen hier unten:

<!-- 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); 

Answer 1

So erste Kontrolllösung mit Dummy-Daten: https://jsfiddle.net/g3vczzqh/1/

I p Einige Javascript, die Ihr Problem lösen, und ich vereinfachte Ihr Skript ein wenig, könnten Sie natürlich weiter verbessern. Überprüfen Sie auch Kommentare in Code, die sie am hilfreichsten sind. Es gab einige Probleme mit Ihrem Code.

müssen Sie zunächst für post_tier wählen ändern Sie fehlt id dort:

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

dann hast du nicht newsrc Variable initialisieren und Ihre Werte waren Zeichenfolge, so dass Sie parseInt vor switch-Anweisung hatte, und Sie hatten 0 in Ihrer switch-Anweisung und Sie haben keinen Wert 0 in Ihren Auswahloptionen (Sie haben jedoch 5). Es gibt auch keine Notwendigkeit, Code zweimal zu schreiben, Sie könnten eine Funktion daraus machen oder es ein bisschen wie in meinem Beispiel vereinfachen.

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

    }); 

    });