个人中心
gpt4 book ai didi

javascript - 如何在多个 Bootstrap 选项卡上运行 .js 文件？

转载 作者：行者123 更新时间：2023-11-28 01:22:59 25 4
gpt4 key购买 nike

我有一个页面运行一个从 JSON 文件中提取数据的 JavaScript 文件。 JS 在页面上附加一个 div。目前 JS 在 $(document).ready 上运行。

我已经使用 Bootstrap 向页面添加了选项卡，我想在不同的选项卡上运行相同的 JS 代码，但为每个选项卡访问不同的 JSON 文件。

我是否需要将 JS 包装到一个新函数中并使用选项卡单击事件在函数中调用它？只是寻求有关执行此操作的最佳方法的一点帮助。

编辑添加代码:

<!DOCTYPE html>
<html lang = "en">
<head>

 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="quiz.json"></script>
<script src="Quiz.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/bootstrap-3.3.5-dist/css/bootstrap.min.css">

</head>
<body role = "document">

<div class="container" >
    <div class="row">
        <div class="col-md-12">
            <h2>Presidential Trivia</h2> </hr>
            <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab1" aria-controls="home" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#tab2" aria-controls="profile" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#tab3" data-toggle="tab">Messages</a></li>
                </ul>
            </div>
    </div>


<!-- tab sections -->

    <div class="tab-content">
        <div class="tab-pane active" id="tab1"> 
            <div class="row" style="height:100px">
            </div>  
            <div class="row">
                <div class="col-md-4"></div>    
                    <div class="col-md-4">

                        <div id='main' class="panel panel-info">
                        </div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">

                            </div>
                        </div>

                        <div id='buttons'>
                                <button id='prev' class='btn'>Back</button>                             
                                <button id='next' class='btn pull-right'>Next</button><br><br>
                                <button id='restart' class='btn'>Start Over?</button>                               
                        </div>

                    </div>
                <div class="col-md-4"></div>    
            </div>
        </div>      

        <div class="tab-pane" id="tab2">

            <div class="row" style="height:100px">
                </div>  
                <div class="row">
                    <div class="col-md-4"></div>    
                        <div class="col-md-4">

                            <div id='main' class="panel panel-info">
                            </div>


                            <div class="progress">
                                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">

                                </div>
                            </div>

                    <div id='buttons'>
                                    <button id='prev' class='btn'>Back</button>                             
                                    <button id='next' class='btn pull-right'>Next</button><br><br>
                                    <button id='restart' class='btn'>Start Over?</button>                               
                            </div>

                        </div>
                    <div class="col-md-4"></div>    
                </div>
            </div>  
        </div>
        <div class="tab-pane" id="tab3">Tab 3 content....
        </div>
    </div>
</div>

<script src="Assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
</body>
</html>

JavaScript:

$(document).ready(function(){

var allQuestions;

var userName ;
var counter = 0;
var main = $("#main");
var userInputs = [];
var numCorrect = 0;
var fadeSpeed = 700;

var next = $("#next");
var prev = $("#prev");
var restart = $("#restart")


//ajax call to json file
function getData(myUrl, cb) {
    $.ajax({
        type: "GET",
        url: myUrl,

        success: function(content) {
            var myData = content;
            cb(null, myData);
        },

        error: function() {
            cb(true);
        }
    });
}

getData('quiz.json', function(err, data) {
    if(err) {
        console.log('There was an error getting quiz data. Try again later or contact the admin.');
        return;
    }
    //store data as a global variable
    allQuestions = data;
    //load first question
    createQDiv();
})

if (counter == 0) {
  $("#prev").hide();
}

//click handler for Next Question button
next.click(function() {

  var selection = $("input[name=answer]:checked").val();
  if (selection != undefined) {
    choose();
    fadeQuestion();
    setTimeout(function() {
      clearLast();
      counter++;
      moveProgress();
      prev.show();
      createQDiv();
    }, fadeSpeed);

  } else {
    alert("You must select an answer to proceed.")
  };
});

//creates question element
function createQDiv() {
  //$("#prev").hide();
  var question = $("<div id='question' class='panel-body'></div>").fadeIn(fadeSpeed);
  main.append(question);
  if (counter <  allQuestions.length) {
    displayNext();
  } else {
    displayScore();
  }
};

//fade out question element
function fadeQuestion() {
  $("#question").fadeOut(fadeSpeed);
};

//clears question element
function clearLast() {
  main.empty();
};

//adds question and answers to question element
function displayNext() {
  restart.hide();
  var qPara = $("<p>" + allQuestions[counter].question + "</p>")
  $("#question").append(qPara);
  createRadios();
  addPrevSelection();

};

//creates radio buttons for each choice
function createRadios() {
  var choices = allQuestions[counter].choices;
  //var formElement = $("<form></form>");
  //$("#question").append(formElement);
  for (i = 0; i < choices.length; i++) {
    $("#question").append($("<input type='radio' name='answer' value='" + i + "'>" + choices[i] + "<br>"));
  };
};

//checks user's answer choice and stores in array
function choose() {
  var input = $("input[name=answer]:checked").val();

  userInputs[counter] = input;

};

//create function for checking user's answers vs number correct. output = number of correct answers
function correctAns() {
  for (i = 0; i < allQuestions.length; i++) {
    if (userInputs[i] == allQuestions[i].correct) {
      numCorrect++;
    };
  };
};
//create 'last page' for displaying user's score

function displayScore() {
  next.hide();
  prev.hide();
  correctAns();
  var score = (numCorrect / allQuestions.length);
  //var encouragement;
  var scoreElement = $("<p>You got " + numCorrect + " out of " + allQuestions.length + " correct.</p>");
  $("#question").append(scoreElement);
  /*if(score == 1){encouragement = " Perfect Score. You are amazing.";}else if(0.5<score<1){encouragement = "Better luck next time!";}else{encouragement = "Repeat after me: 'Do you want fries with that?'"};
  scoreElement.append(encouragement);*/

  restart.show();
};

prev.click(function() {
  if (counter > 0) {
    fadeQuestion();
    setTimeout(function() {
      clearLast();
      counter--;
      moveProgress();
      createQDiv();
      addPrevSelection();
      choose();
    }, fadeSpeed);

    //Cristina: what if user changes input and then hits back? It isn't kept, only logged on the next button.
  }
  else {
    prev.hide();
  }
});

function addPrevSelection() {
  var selection = userInputs[counter];
  var radioSelected = $("input[value='" + selection + "']");
  //alert(radioSelected);
  radioSelected.prop("checked", true);
};

restart.click(function() {
  counter = 0;
  next.show();
  userInputs = [];
  numCorrect = 0;
  clearLast();
  moveProgress();
  createQDiv();


});


function moveProgress(){
var newWidth = ((counter)/allQuestions.length)*100;
$(".progress-bar").css("width", "" + newWidth + "%");
};

});

JSON 文件:

[{
  "question": "How many presidents were members of the Whig party?",
  "choices": ["Four", "Three", "Two"],
  "correct": 0
}, {
  "question": "Who was the first president to be impeached?",
  "choices": ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
  "correct": 1
}, {
  "question": "How many presidents died during their presidency?",
  "choices": ["Four", "Six", "Eight"],
  "correct": 2
}, {
  "question": "How many presidents had no party affiliation?",
  "choices": ["One", "Two", "Three"],
  "correct": 0
}, {
  "question": "Who was the only president to serve two non-consecutive terms, making him both the 22nd and 24th president?",
  "choices": ["John Quincy Adams", "William Howard Taft", "Grover Cleveland"],
  "correct": 2
}]

最佳答案

下面只是一个 DEMO 关于如何使用“show.bs.tab”事件在显示之前更改当前事件 Pane 的内容。检查内联评论以获得更详细的解释。

//Below I have just given sample for contents to change dynamcically, You can think
//of changing or assigning urls here instead of contents
//For Ex: var url="sample/sample" and change this in switch case

var Homejson="Some Home Content";
var Profilejson="Some Profile Content";
var MessagesJson="Some Message Content";
var SettingsJson="Some Settings Content";
var body="";

function getTabContents(target)
{
   //based on the target passed change the url content in this common function or you 
   //can pass the url here based on tab selected and write your ajax as below
  /*$.ajax({
       url:urlpassedasparameter,
       data:necessarydata,
       success:function(result){
           return the content here
       },
       error:function(){
           return some message here
       }
  });*/

   var content="";
   switch(target){
       case "home":
           content=Homejson;
           break;
       case "profile":
           content=Profilejson;
           break;
       case "messages":
           content=MessagesJson;
           break;
       case "settings":
           content=SettingsJson;
           break;
       default:
           break;
   }
    return content;
}

$(document).ready(function(){
    //call the function on document ready and pass the first panel as default
    body = getTabContents("home")
    $('#home').html(body);//assign html of content changed to the particular tab-pane
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //this method is very important and e.target below refers to current element which is equal to "this"
  var target=$(e.target).attr('aria-controls') // newly activated tab
  //fetch any of the data from target element and use it to change the url or content
  body=getTabContents(target);
  //again get the contents from function
  $("#"+target).html(body);
  //add as html to body.
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Let me know if you have any doubts

关于javascript - 如何在多个 Bootstrap 选项卡上运行 .js 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33282204/

25 4 0
文章推荐： html - 图片没有加载到 Chrome 上的代码笔上？
文章推荐： c++ - 哪种方法更好地获取静态链接 DLL 的模块句柄 (HMODULE) - 使用 GetModuleHandleEx() 或 LoadLibrary()？
文章推荐： javascript - 如何找到标签是父元素？
文章推荐： javascript - 基于点击功能的toggleClass
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com