网站链接: http://34.246.124.138/test/
该代码可在JSfiddle上运行,但不适用于我的网站。这是我的代码或我在wordpress上使用的阻止其正常工作的主题的问题吗?我的站点中还安装了WP面包店。
JS小提琴-http://jsfiddle.net/vwgeypfL/
代码-
jQuery('#preference, #style').on('change', function(){
var preference = jQuery('#preference');
var style = jQuery('#style');
if ( preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0 ) {
jQuery('.result.active').removeClass('active');
jQuery('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
}
});
.result {display:none;}
.result.active {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head><style>.result {display:none;}
.result.active {display:block;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>
<body></body>
<p>What is your astrology sign?</p>
<select id="preference">
<option value="select">select</option>
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
<option value="cancer">Cancer</option>
<option value="leo">Leo</option>
<option value="virgo">Virgo</option>
<option value="libra">Libra</option>
<option value="scorpio">Scorpio</option>
<option value="sagittarius">Sagittarius</option>
<option value="capricon">Capricon</option>
<option value="aquarius">Aquarius</option>
<option value="pisces">Pisces</option>
</select>
<select id="style">
<option value="select">select</option>
<option value="sun">Sun</option>
<option value="moon">Moon</option>
</select>
<div class="result" data-preference="aries" data-style="sun">
<p>Your Song Is</p>
<h3>Cosmic Wind</h3>
<h6>“Creation, Preservation and Destruction, Breathe, Open your arms, fall all over again.” </h6>
</div>
<div class="result" data-preference="aries" data-style="moon">
<p>Your Song Is</p>
<h3>Can I See It</h3>
<h6>“Sunlight’s Out Gonna Burn to the ground” </h6>
</div>
<div class="result" data-preference="taurus" data-style="sun">
<p>Your Song Is</p>
<h3>When I Told You I Loved You</h3>
<h6> “When I told you I loved you, I was for real."</h6></div>
<div class="result" data-preference="taurus" data-style="moon">
<p>Your Song Is</p>
<h3>Into Me</h3>
<h6> “Intimacy, Sexually, Emotionally, Financially, Spiritually, get into me.” </h6></div>
<div class="result" data-preference="gemini" data-style="sun">
<p>Your Song Is</p>
<h3>Honey Dew</h3>
<h6> “Open Mind, Look I find something in the rain as it falls.” </h6></div>
<div class="result" data-preference="gemini" data-style="moon">
<p>Your Song Is</p>
<h3>Reminisce</h3>
<h6> “Sometimes I reminisce about you, things change every minute every season.” </h6></div>
<div class="result" data-preference="cancer" data-style="sun">
<p>Your Song Is</p>
<h3>Can I See It</h3>
<h6> “Sunlight’s Out Gonna Burn to the ground” </h6></div>
<div class="result" data-preference="cancer" data-style="moon">
<p>Your Song Is</p>
<h3>Different Planet</h3>
<h6> “Tell me how I feel so deep?” </h6>
</div>
<div class="result" data-preference="Leo" data-style="Sun">
<p>Your Song Is</p>
<h3>Hit The Ceiling</h3>
<h6> “We ain’t got no limit, and we don’t let go”</h6></div>
<div class="result" data-preference="Leo" data-style="Moon">
<p>Your Song Is</p>
<h3>When I Told You I Loved You</h3>
<h6> “When I told you I loved you, I was for real."</h6></div>
<div class="result" data-preference="virgo" data-style="sun">
<p>Your Song Is</p>
<h3>Anyway You Want To</h3>
<h6> “Anyway you want to we will go” </h6></div>
<div class="result" data-preference="virgo" data-style="moon">
<p>Your Song Is</p>
<h3>Never Before</h3>
<h6> “So what’s the move, I’m in the mood” </h6></div>
<div class="result" data-preference="Libra" data-style="sun">
<p>Your Song Is</p>
<h3>So Long</h3>
<h6> “You and me both know we needed to grow.“</h6>
</div>
<div class="result" data-preference="Libra" data-style="moon">
<p>Your Song Is</p>
<h3>Honey Dew</h3>
<h6> “Open Mind, Look I find something in the rain as it falls.” </h6></div>
<div class="result" data-preference="Scorpio" data-style="sun">
<p>Your Song Is</p>
<h3>Sexy Please</h3>
<h6> “Can I be sexy please?”</h6></div>
<div class="result" data-preference="Scorpio" data-style="moon">
<p>Your Song Is</p>
<h3>So Long</h3>
<h6> “You and me both know we needed to grow.“</h6></div>
<div class="result" data-preference="sagittarius" data-style="sun">
<p>Your Song Is</p>
<h3>Anyway You Want To</h3>
<h6> “Anyway you want to we will go” </h6></div>
<div class="result" data-preference="sagittarius" data-style="moon">
<p>Your Song Is</p>
<h3>The Wave</h3>
<h6> “Everybody’s moving through the wave, let’s go.”</h6></div>
<div class="result" data-preference="capricorn" data-style="sun">
<p>Your Song Is</p>
<h3>Into Me</h3>
<h6> “Intimacy, Sexually, Emotionally, Financially, Spiritually, get into me.” </h6></div>
<div class="result" data-preference="capricorn" data-style="moon">
<p>Your Song Is</p>
<h3>Western World</h3>
<h6> “We should know what we’re breathing for, sooner we let it go, like a tree, we grow, we grow.” </h6></div>
<div class="result" data-preference="aquarius" data-style="sun">
<p>Your Song Is</p>
<h3>No Rules</h3>
<h6> “You tell me all of the things I gotta do, and I’ll let you know if I feel the same or if we’re through.”</h6></div>
<div class="result" data-preference="aquarius" data-style="moon">
<p>Your Song Is</p>
<h3>Different Planet</h3>
<h6>“Tell me how I feel so deep?” </h6></div>
<div class="result" data-preference="pisces" data-style="sun">
<p>Your Song Is</p>
<h3>The Wave</h3>
<h6> “Everybody’s moving through the wave, let’s go.”</h6>
</div>
<div class="result" data-preference="pisces" data-style="moon">
<p>Your Song Is</p>
<h3>Cosmic Wind</h3>
<h6>“Creation, Preservation and Destruction, Breathe, Open your arms, fall all over again.” </h6></div>