Bootstrap/jQuery 单选按钮在 Firefox/Safari 上不起作用

Question

我有一个 Bootstrap 单选按钮用于 showing/hiding 部分内容，它在 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);

Bootstrap/jQuery 单选按钮在 Firefox/Safari 上不起作用

Bootstrap/jQuery radio buttons don't work on Firefox/Safari

html

javascript

firefox

jquery

radio