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

【问题标题】：Bootstrap/jQuery radio buttons don't work on Firefox/SafariBootstrap/jQuery 单选按钮在 Firefox/Safari 上不起作用
【发布时间】：2018-10-12 13:01:37
【问题描述】：

我有一个用于显示/隐藏部分内容的 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 应该没有任何问题，但似乎有。可能是什么原因？

当我尝试在从下面的 sn-p 加载脚本之前手动加载 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 -->

【问题讨论】：

看起来 jQuery 没有加载。检查浏览器的开发工具和网络选项卡：请求 jQuery 库时得到什么响应？
它适用于我的 FF
在页面底部加载代码时是否有效？
@Terry 我为所有 jquery 加载获得了 200 个代码。但是，它是jQuery v1.12.4，是不是太旧了？但我使用的是最新版本的 WP 和主题。
@PatrickCyiza “你的代码”是什么意思？你的意思是

标签： javascript jquery html firefox radio

【解决方案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);

【讨论】：

我想这一定是每个浏览器处理跨站脚本的方式。