Bootstrap/jQuery 單選按鈕在 Firefox/Safari 上不起作用

Question

我有一個用於顯示/隱藏部分內容的 Bootstrap 單選按鈕，它在 Chrome 上完美運行，但在 Firefox 和 Safari（iPhone、iPad ......）上不起作用。 它默認顯示所有內容 - 即使 5 行中有 4 行應在加載時隱藏。

另外，我在 Firefox 上遇到了這兩個錯誤（它們沒有出現在 Chrome 上）：

TypeError: t is undefined[Learn More]
bootstrap.min.js:6:2080

ReferenceError: jQuery is not defined[Learn More]
togglebuttons.js:115:1

這是一個 WordPress 網站，擁有市場上最受歡迎的付費主題之一，所以我猜 jQuery 應該沒有任何問題，但似乎有。 可能是什么原因？

當我嘗試在從下面的代碼段加載腳本之前手動加載 jQuery 時，頁面甚至無法加載，因為我遇到了一些 jQuery 沖突。

這是代碼：

 (function($) { var $first_visible = 1; var $second_visible = 0; var $third_visible = 0; var $fourth_visible = 0; var $fifth_visible = 0; // hide all except the first one implicitly $( document ).ready(function() { $('#row2').hide('1'); $('#row3').hide('1'); $('#row4').hide('1'); $('#row5').hide('1'); }); $("input[name=options]").change(function () { if(this.value == "1") { if($second_visible) { $('#row2').fadeOut('200', function() { $('#row1').fadeIn('200'); }); $second_visible = 0; } else if($third_visible) { $('#row3').fadeOut('200', function() { $('#row1').fadeIn('200'); }); $third_visible = 0; } else if($fourth_visible) { $('#row4').fadeOut('200', function() { $('#row1').fadeIn('200'); }); $fourth_visible = 0; } else if($fifth_visible) { $('#row5').fadeOut('200', function() { $('#row1').fadeIn('200'); }); $fifth_visible = 0; } $first_visible = 1; } else if(this.value == "2") { if($first_visible) { $('#row1').fadeOut('200', function() { $('#row2').fadeIn('200'); }); $first_visible = 0; } else if($third_visible) { $('#row3').fadeOut('200', function() { $('#row2').fadeIn('200'); }); $third_visible = 0; } else if($fourth_visible) { $('#row4').fadeOut('200', function() { $('#row2').fadeIn('200'); }); $fourth_visible = 0; } else if($fifth_visible) { $('#row5').fadeOut('200', function() { $('#row2').fadeIn('200'); }); $fifth_visible = 0; } $second_visible = 1; } else if(this.value == "3") { if($first_visible) { $('#row1').fadeOut('200', function() { $('#row3').fadeIn('200'); }); $first_visible = 0; } else if($second_visible) { $('#row2').fadeOut('200', function() { $('#row3').fadeIn('200'); }); $second_visible = 0; } else if($fourth_visible) { $('#row4').fadeOut('200', function() { $('#row3').fadeIn('200'); }); $fourth_visible = 0; } else if($fifth_visible) { $('#row5').fadeOut('200', function() { $('#row3').fadeIn('200'); }); $fifth_visible = 0; } $third_visible = 1; } else if(this.value == "4") { if($first_visible) { $('#row1').fadeOut('200', function() { $('#row4').fadeIn('200'); }); $first_visible = 0; } else if($second_visible) { $('#row2').fadeOut('200', function() { $('#row4').fadeIn('200'); }); $second_visible = 0; } else if($third_visible) { $('#row3').fadeOut('200', function() { $('#row4').fadeIn('200'); }); $third_visible = 0; } else if($fifth_visible) { $('#row5').fadeOut('200', function() { $('#row4').fadeIn('200'); }); $fifth_visible = 0; } $fourth_visible = 1; } else if(this.value == "5") { if($first_visible) { $('#row1').fadeOut('200', function() { $('#row5').fadeIn('200'); }); $first_visible = 0; } else if($second_visible) { $('#row2').fadeOut('200', function() { $('#row5').fadeIn('200'); }); $second_visible = 0; } else if($third_visible) { $('#row3').fadeOut('200', function() { $('#row5').fadeIn('200'); }); $third_visible = 0; } else if($fourth_visible) { $('#row4').fadeOut('200', function() { $('#row5').fadeIn('200'); }); $fourth_visible = 0; } $fifth_visible = 1; } }); })(jQuery);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- TOGGLE BUTTONS --> <div class="row togglebuttons-row"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" value="1" checked><span class="radio-span">Show 1</span> </label> <label class="btn btn-success btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off" value="2"><span class="radio-span">Show 2</span> </label> <label class="btn btn-success btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off" value="3"><span class="radio-span">Show 3</span> </label> <label class="btn btn-success btn-primary"> <input type="radio" name="options" id="option4" autocomplete="off" value="4"><span class="radio-span">Show 4</span> </label> <label class="btn btn-success btn-primary"> <input type="radio" name="options" id="option5" autocomplete="off" value="5"><span class="radio-span">Show 5</span> </label> </div><!-- btn-group --> </div><!-- row --> <!-- ************************************* ********** GENEROVANIE KONTAKTOV ********* --> <div class="row row-eq-height contact-list" id="row1"> hello 1 </div><!-- row1 --> <div class="row row-eq-height contact-list" id="row2"> hello 2 </div><!-- row2 --> <div class="row row-eq-height contact-list" id="row3"> hello 3 </div><!-- row3 --> <div class="row row-eq-height contact-list" id="row4"> hello 4 </div><!-- row4 --> <div class="row row-eq-height contact-list" id="row5"> hello 5 </div><!-- row5 -->

Answer 1

我相信我終於想通了。 問題是 jQuery 正在 Chrome 上加載（不知何故），但沒有在 Firefox 或 Apple 設備上加載。

我以傳統方式在文件末尾加載我的腳本，在 .php 正文中使用<script>標簽。 當我對 WordPress 使用正確的方法時，它似乎終於起作用了。 我在主題的 functions.php 文件中使用了這段代碼：

wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/myscript.js', array('jquery'), null, true);