我有一个用于显示/隐藏部分内容的Bootstrap单选按钮，它在Chrome上运行得很好，但在Firefox和Safari（iPhone，iPad ......）上都不起作用。它默认显示所有内容 - 即使5行中的4行应该隐藏onload。
另外，我在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 -->
答案 0 :(得分：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);