javascript - JS 文件未加载到 html 中

标签 javascript jquery html css file

出于某种原因，BoostOdds.js 已停止加载我的 html，同一文件 BoostOdds.js 中的 jQuery 代码正在运行，所以我完全迷路了，如何那有可能吗？

查看 Toggle all 按钮以查看 jQuery 是否正常工作，并查看所有其他按钮以查看 JS 是否正常工作。

Index.html

&

BoostOdds.js

在同一个目录中。这是代码，感谢您的帮助:

function oneElmToggle(elm) {
  const display = elm.nextSibling.style.display;
  if (display === "none" || display === "") {
    elm.nextSibling.style.display = "block";
  }
  else {
    elm.nextSibling.style.display = "none";
  }
}
window.onload = function () {
  $("#toggleAllElms").click(function () {
    $(".toggleAcronym").toggle('fast');
  });
};
* {
    text-align: center;
    height: auto;
    padding: 10px 0;
    box-sizing: border-box;
    text-decoration: none;
    color: black;
}

.p {
    font-size: 1.5rem;
    background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    width: 70%;
    margin: 25px auto;
    color: aliceblue;
    padding: 10px;
  }

.pv2 {
    background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    padding: 10px 5px;
    color: aliceblue;
    margin: 10px 0;
}

.pv2 span {
  color: white;
}

.BOLD {
    font-weight: 800;
}

.UNDERLINED {
    text-decoration: underline;
}

.MARKED {
    background-color: rgba(251, 255, 0, 0.315);
    padding: 2px;
    display: inline;
}

.CURSIVE {
    font-style: italic;
}

#REDTEXT, .REDTEXT {
    color: red;
}

body {
    min-width: 700px;
}

header {
    width: 100%;
    min-width: 700px;
    height: 80px;
    text-align: center;
    background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
    color: rgb(250,220,255);
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 3px 3px rgb(0,0,0);
}

#IPT {
    color: aliceblue;
    margin-top: 0px; 
}

.CMPT /* Choose Meta Principle Title */ {
   text-align: center;
   border: 2px solid rgb(255, 0, 0);
   width: 40%;
   margin: 80px auto 0 auto;
}

.CMPC /* Choose Meta Principle Container*/ {
    list-style-type: none;
    width: 90%;
    margin: -10px auto 20px auto; 
}

.MPC /* Meta Principle Choice*/ {
    width: auto;
    background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    margin-top: 25px;
    font-size: 2rem;
    font-weight: 700;
}

.MPC:hover {
    color: white;
    background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
}

.MP /* Meta Principle */ {
    width: 60%;
    background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    color: white;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 700;
}

.CSP { 
    text-align: center;
    border: 2px solid rgb(255, 0, 0);
    width: 40%;
    margin: 40px auto 20px auto;
 }

.CSPFC {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 98%;
    margin: 0px auto 20px auto;
  }

.SPC {
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    width: 25%;
    margin: 0 3px;
    box-shadow: -1px 3px 3px black;
  }
 
.SPC:hover {
    background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
    color: black;
  }

.SP {
    font-size: 1.6rem;
    text-align: center;
    background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    width: 86%;
    margin: 20px auto;
  }

.C {
      border: 1px solid black;
      border-radius: 30%;
      width: 60%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-auto-rows: auto;
      padding: 35px 80px;
      grid-column-gap: 15px;
    }

#p1131 {  
    border-right: 1px solid grey;
    background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
    grid-area: 1 / 1 / 2 / 3;
  }

#p11311 {
      background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
      grid-area: 2 / 1 / 3 / 2;
    }

#p11312 {
    grid-area: 2 / 2 / 3 / 3;
    background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
  }   

#p11313 {
    grid-area: 3 / 2 / 4 / 3;
    border-right: 1px solid grey;
    background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
    font-size: .7rem;
}

#p11314 {
    background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
    border-right: 1px solid grey;
    font-size: .7rem;
    grid-area: 4 / 2 / 5 / 3;
  }

.C3C { /*Container 3 Columns*/
    grid-template-columns: repeat(3, 33%);
    padding: 25px 80px;
}

#p1135 {
    grid-area: 1 / 1 / 2 / 4;
    background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
  }

#p11351 {
    grid-area: 2 / 1 / 3 / 2;
  }

#p11352 {
    grid-area: 2 / 2 / 3 / 3;
}

#p11353 {
    grid-area: 2 / 3 / 3 / 4;
}

#p1136Acronyms {
      width: 30%;
      border: 1px solid black;
      margin: 0 auto;
      padding: 5px;
  }

#p1136Acronyms button {
    width: 100%;
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    padding: 10px;
    background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255)); 
    color: azure;
}

#p1136Acronyms button:hover {
    background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
    color: antiquewhite;
}

#p1136Acronyms  p {
    display: none;
}

#p1137 span {
    color: white;
}

#p1138 {
    grid-area: 1 / 1 / 2 / 4;
    background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}

footer {
    height: 30px;
    width: 100%;
    background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
    position: absolute;
    left: 0;
    background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
    <!DOCTYPE HTML5><html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="../../css/BoostOdds.css">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>

<body>

<header>
<h1 id="IPT"> <!-- Intellectual Principles Title-->
    Intellectual Principles
</h1>
</header>

<h2 class="CMPT">Choose Meta-Principle</h2> <!-- Choose Meta Principle Title -->

<ul class="CMPC"> <!-- Choose Meta Principle Container -->
    <a href="#p11"><li class="MPC">  <!-- Meta Principle Choice -->
        Boost your odds of success through de-centralized principle-guided decision-making.
    </li></a>                
    <a href=""><li class="MPC"> <!-- Meta Principle Choice -->
       Learn, Grow, Evolve. Be Anti-Fragile.
    </li></a>   
    <a href=""><li class="MPC"> <!-- Meta Principle Choice -->
        Apply principles in complex sub-systems of reality.
    </li></a>
</ul>

    <h2 class="MP" id="p11"> <!-- Meta Principle -->
        Boost your odds of success through de-centralized principle-guided decision-making.
    </h2>

    <h2 class="CSP"> <!-- Choose Sub Principle -->
        Choose Sub-Principle
    </h2>
    
    <div class="CSPFC"> <!-- Choose Sub Principle Flex Container-->
        <a class="SPC" href="#p111"> <!-- Sub Principle Choice -->
            Find out what reality looks like through <i>The Scientific Method</i><!-- Link to other doc--> & phenomenology of consciousness.
        </a>
        <a class="SPC" href="#p112"> <!-- Sub Principle Choice -->
            <i>Find your meaning/Why What do you want reality to be like?</i><!-- Link to other doc-->
        </a>
        <a class="SPC" href="#p113"> <!-- Sub Principle Choice -->
            Write down principles for making decisions in future realities.
        </a>
        <a class="SPC" href="#p114"> <!-- Sub Principle Choice -->
            Turn principles into algorithms.</a>
        <a class="SPC" href="#p115"> <!-- Sub Principle Choice -->
            Incrementally RUD principles for 4 AoL.
        </a>
        <a class="SPC" href="#p116"> <!-- Sub Principle Choice -->
            Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i>
        </a>
    </div>
 
    <h3 class="SP" id="p111"> <!-- Sub Principle -->
        Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.
    </h3>
    <h3 class="SP" id="p112"> <!-- Sub Principle -->
        <a>Find your meaning/Why</a> <i>What do you want reality to be like?</i>
    </h3>
    <h3 class="SP" id="p113"> <!-- Sub Principle -->
        Write down principles for making decisions in future realities.
    </h3>
   
 <div class="C"> <!-- Container -->
    <h4 class="pv2" id="p1131">Meta-principles make sub-principles obsolete.</h4>
    <h4 class="pv2" id="p11311">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</h4>
    <h4 class="pv2" id="p11312">Delay decisions AMA(subj.)P.</h4>
    <h4 class="pv2" id="p11313">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</h4>
    <h4 class="pv2" id="p11314">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</h4>
</div>

 <div class="p" id="p1132">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of fully being.</div>
 <div class="p" id="p1133">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
 <div class="p" id="p1134">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>


<div class="C C3C"> <!-- Container 3 Columns -->
    <h4 class="pv2" id="p1135">Use markers, colors and distinguishers. //To communicate with your future self.</h4>
    <h4 class="pv2" id="p11351"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</h4>
    <h4 class="pv2" id="p11352"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</h4>
    <h4 class="pv2" id="p11353"><span id="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done w/principle.</h4>
</div>
 
 <div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms"> <!-- First jQuery/JS -->
    <button onclick="oneElmToggle(this)">RWE</button>
    <p class="toggleAcronym">Real World Example</p> 

    <button onclick="oneElmToggle(this)">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>

    <button onclick="oneElmToggle(this)">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>

    <button onclick="oneElmToggle(this)">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>

    <button onclick="oneElmToggle(this)">I.e.</button>
    <p class="toggleAcronym">In essence</p>

    <button onclick="oneElmToggle(this)">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>

    <button onclick="oneElmToggle(this)">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>

    <button onclick="oneElmToggle(this)">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>

    <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>

    <button onclick="oneElmToggle(this)">AoL</button>
    <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>
    
    <button onclick="oneElmToggle(this)">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p> 
   
    <button onclick="oneElmToggle(this)">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>
   
    <button onclick="oneElmToggle(this)">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>
   
    <button onclick="oneElmToggle(this)">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
   
    <button onclick="oneElmToggle(this)">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>
   
    <button id="toggleAllElms"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>

<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->

<div class="C C3C">
    <h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
        <h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
        <h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
        <h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>

    <h3 class="SP" id="p114">Turn principles into algorithms.</h3>
    <div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
    <h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
    <h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
    <a href=""><div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div></a>

    <footer>
</footer>

</body>
</html>

我可以看到 jQuery 在此代码段中不起作用，但它在我的元素中起作用，所以我的主要问题是如何使 JS 在我的元素中也起作用。谢谢。

更新: 文件夹结构:

CODE //Project folder
 - css
 - node_modules
     - jQuery npm (Pseudo for loads of folders and files)
 - Principles
     - IntPrin
          - BoostOdds.js
          - index.html
 - scss
 - index.js //Main/Starting, server is set up here
 - package.json
 - package-lock.json

最佳答案

jQuery 可以工作，但 oneElmToggle 不行 那么为什么要使用 vanila JS 来实现这个功能呢？使用 jquery 方法。它紧凑而简单:

// there is no need for inline onclick="oneElmToggle(this)" on every button
// and inline JS in no-no

$("#p1136Acronyms > button:not(#toggleAllElms)").click(oneElmToggle)
             // all buttons exept one with id="toggleAllElms"

function oneElmToggle() {
  $(this).next().toggle('fast')
       // nextSibling
}

window.onload = function() {
  $("#toggleAllElms").click(function() {
    $(".toggleAcronym").toggle('fast');
  });
};
* {
  text-align: center;
  height: auto;
  padding: 10px 0;
  box-sizing: border-box;
  text-decoration: none;
  color: black;
}

.p {
  font-size: 1.5rem;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  width: 70%;
  margin: 25px auto;
  color: aliceblue;
  padding: 10px;
}

.pv2 {
  background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  padding: 10px 5px;
  color: aliceblue;
  margin: 10px 0;
}

.pv2 span {
  color: white;
}

.BOLD {
  font-weight: 800;
}

.UNDERLINED {
  text-decoration: underline;
}

.MARKED {
  background-color: rgba(251, 255, 0, 0.315);
  padding: 2px;
  display: inline;
}

.CURSIVE {
  font-style: italic;
}

#REDTEXT,
.REDTEXT {
  color: red;
}

body {
  min-width: 700px;
}

header {
  width: 100%;
  min-width: 700px;
  height: 80px;
  text-align: center;
  background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
  color: rgb(250, 220, 255);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 3px 3px rgb(0, 0, 0);
}

#IPT {
  color: aliceblue;
  margin-top: 0px;
}

.CMPT
/* Choose Meta Principle Title */

{
  text-align: center;
  border: 2px solid rgb(255, 0, 0);
  width: 40%;
  margin: 80px auto 0 auto;
}

.CMPC
/* Choose Meta Principle Container*/

{
  list-style-type: none;
  width: 90%;
  margin: -10px auto 20px auto;
}

.MPC
/* Meta Principle Choice*/

{
  width: auto;
  background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  margin-top: 25px;
  font-size: 2rem;
  font-weight: 700;
}

.MPC:hover {
  color: white;
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}

.MP
/* Meta Principle */

{
  width: 60%;
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  color: white;
  margin: 0 auto;
  font-size: 2rem;
  font-weight: 700;
}

.CSP {
  text-align: center;
  border: 2px solid rgb(255, 0, 0);
  width: 40%;
  margin: 40px auto 20px auto;
}

.CSPFC {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  width: 98%;
  margin: 0px auto 20px auto;
}

.SPC {
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  width: 25%;
  margin: 0 3px;
  box-shadow: -1px 3px 3px black;
}

.SPC:hover {
  background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
  color: black;
}

.SP {
  font-size: 1.6rem;
  text-align: center;
  background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  width: 86%;
  margin: 20px auto;
}

.C {
  border: 1px solid black;
  border-radius: 30%;
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: auto;
  padding: 35px 80px;
  grid-column-gap: 15px;
}

#p1131 {
  border-right: 1px solid grey;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
  grid-area: 1 / 1 / 2 / 3;
}

#p11311 {
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
  grid-area: 2 / 1 / 3 / 2;
}

#p11312 {
  grid-area: 2 / 2 / 3 / 3;
  background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}

#p11313 {
  grid-area: 3 / 2 / 4 / 3;
  border-right: 1px solid grey;
  background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
  font-size: .7rem;
}

#p11314 {
  background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
  border-right: 1px solid grey;
  font-size: .7rem;
  grid-area: 4 / 2 / 5 / 3;
}

.C3C {
  /*Container 3 Columns*/
  grid-template-columns: repeat(3, 33%);
  padding: 25px 80px;
}

#p1135 {
  grid-area: 1 / 1 / 2 / 4;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}

#p11351 {
  grid-area: 2 / 1 / 3 / 2;
}

#p11352 {
  grid-area: 2 / 2 / 3 / 3;
}

#p11353 {
  grid-area: 2 / 3 / 3 / 4;
}

#p1136Acronyms {
  width: 30%;
  border: 1px solid black;
  margin: 0 auto;
  padding: 5px;
}

#p1136Acronyms button {
  width: 100%;
  border: 1px solid rgb(0, 0, 0);
  margin: 0 auto;
  padding: 10px;
  background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
  color: azure;
}

#p1136Acronyms button:hover {
  background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
  color: antiquewhite;
}

#p1136Acronyms p {
  display: none;
}

#p1137 span {
  color: white;
}

#p1138 {
  grid-area: 1 / 1 / 2 / 4;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}

footer {
  height: 30px;
  width: 100%;
  background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
  position: absolute;
  left: 0;
  background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
  <div id="p1136Acronyms">
    <!-- First jQuery/JS -->
    <button>RWE</button>
    <p class="toggleAcronym">Real World Example</p>

    <button>CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>

    <button>CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>

    <button>MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>

    <button>I.e.</button>
    <p class="toggleAcronym">In essence</p>

    <button>ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>

    <button>AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>

    <button>CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>

    <button>RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>

    <button>AoL</button>
    <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>

    <button>MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p>

    <button>QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>

    <button>PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>

    <button>SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>

    <button>P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>

    <button id="toggleAllElms"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
  </div>

为什么内联JS是bad practice .

开发者控制台是您的 friend 。如果有什么不工作 - 检查控制台。在您的代码片段中，除了错误(缺少 jquery 链接)之外还有一个错误:Cannot read property 'display' of undefined。 nextSibling 不是您要找的。 nextElementSibling 就是它。 What is the difference between node.nextSibling and ChildNode.nextElementSibling 

function oneElmToggle(elm) {
  const sibling = elm.nextElementSibling;
  if (!sibling.style.display) {
    // there is no "style.display" by default so we toggle to "block" because in css we have "none"
    sibling.style.display = "block";
  } else {

    if (sibling.style.display === "none") {
      sibling.style.display = "block";
    } else {
      sibling.style.display = "none";
    }

  }
}
window.onload = function() {
  $("#toggleAllElms").click(function() {
    $(".toggleAcronym").toggle('fast');
  });
};
* {
  text-align: center;
  height: auto;
  padding: 10px 0;
  box-sizing: border-box;
  text-decoration: none;
  color: black;
}

.p {
  font-size: 1.5rem;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  width: 70%;
  margin: 25px auto;
  color: aliceblue;
  padding: 10px;
}

.pv2 {
  background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  padding: 10px 5px;
  color: aliceblue;
  margin: 10px 0;
}

.pv2 span {
  color: white;
}

.BOLD {
  font-weight: 800;
}

.UNDERLINED {
  text-decoration: underline;
}

.MARKED {
  background-color: rgba(251, 255, 0, 0.315);
  padding: 2px;
  display: inline;
}

.CURSIVE {
  font-style: italic;
}

#REDTEXT,
.REDTEXT {
  color: red;
}

body {
  min-width: 700px;
}

header {
  width: 100%;
  min-width: 700px;
  height: 80px;
  text-align: center;
  background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
  color: rgb(250, 220, 255);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 3px 3px rgb(0, 0, 0);
}

#IPT {
  color: aliceblue;
  margin-top: 0px;
}

.CMPT
/* Choose Meta Principle Title */

{
  text-align: center;
  border: 2px solid rgb(255, 0, 0);
  width: 40%;
  margin: 80px auto 0 auto;
}

.CMPC
/* Choose Meta Principle Container*/

{
  list-style-type: none;
  width: 90%;
  margin: -10px auto 20px auto;
}

.MPC
/* Meta Principle Choice*/

{
  width: auto;
  background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  margin-top: 25px;
  font-size: 2rem;
  font-weight: 700;
}

.MPC:hover {
  color: white;
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}

.MP
/* Meta Principle */

{
  width: 60%;
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  color: white;
  margin: 0 auto;
  font-size: 2rem;
  font-weight: 700;
}

.CSP {
  text-align: center;
  border: 2px solid rgb(255, 0, 0);
  width: 40%;
  margin: 40px auto 20px auto;
}

.CSPFC {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  width: 98%;
  margin: 0px auto 20px auto;
}

.SPC {
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  width: 25%;
  margin: 0 3px;
  box-shadow: -1px 3px 3px black;
}

.SPC:hover {
  background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
  color: black;
}

.SP {
  font-size: 1.6rem;
  text-align: center;
  background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
  border-radius: 1%;
  box-shadow: 0 7px 7px black;
  width: 86%;
  margin: 20px auto;
}

.C {
  border: 1px solid black;
  border-radius: 30%;
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: auto;
  padding: 35px 80px;
  grid-column-gap: 15px;
}

#p1131 {
  border-right: 1px solid grey;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
  grid-area: 1 / 1 / 2 / 3;
}

#p11311 {
  background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
  grid-area: 2 / 1 / 3 / 2;
}

#p11312 {
  grid-area: 2 / 2 / 3 / 3;
  background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}

#p11313 {
  grid-area: 3 / 2 / 4 / 3;
  border-right: 1px solid grey;
  background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
  font-size: .7rem;
}

#p11314 {
  background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
  border-right: 1px solid grey;
  font-size: .7rem;
  grid-area: 4 / 2 / 5 / 3;
}

.C3C {
  /*Container 3 Columns*/
  grid-template-columns: repeat(3, 33%);
  padding: 25px 80px;
}

#p1135 {
  grid-area: 1 / 1 / 2 / 4;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}

#p11351 {
  grid-area: 2 / 1 / 3 / 2;
}

#p11352 {
  grid-area: 2 / 2 / 3 / 3;
}

#p11353 {
  grid-area: 2 / 3 / 3 / 4;
}

#p1136Acronyms {
  width: 30%;
  border: 1px solid black;
  margin: 0 auto;
  padding: 5px;
}

#p1136Acronyms button {
  width: 100%;
  border: 1px solid rgb(0, 0, 0);
  margin: 0 auto;
  padding: 10px;
  background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
  color: azure;
}

#p1136Acronyms button:hover {
  background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
  color: antiquewhite;
}

#p1136Acronyms p {
  display: none;
}

#p1137 span {
  color: white;
}

#p1138 {
  grid-area: 1 / 1 / 2 / 4;
  background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}

footer {
  height: 30px;
  width: 100%;
  background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
  position: absolute;
  left: 0;
  background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms">
  <!-- First jQuery/JS -->
  <button onclick="oneElmToggle(this)">RWE</button>
  <p class="toggleAcronym">Real World Example</p>

  <button onclick="oneElmToggle(this)">CRUD</button>
  <p class="toggleAcronym">Create, Read, Update, Delete</p>

  <button onclick="oneElmToggle(this)">CNS</button>
  <p class="toggleAcronym">Central Nervous System</p>

  <button onclick="oneElmToggle(this)">MPS</button>
  <p class="toggleAcronym">Muscle Protein Synthesis</p>

  <button onclick="oneElmToggle(this)">I.e.</button>
  <p class="toggleAcronym">In essence</p>

  <button onclick="oneElmToggle(this)">ALAP</button>
  <p class="toggleAcronym">As Long As Possible</p>

  <button onclick="oneElmToggle(this)">AMAP</button>
  <p class="toggleAcronym">As Much As Possible</p>

  <button onclick="oneElmToggle(this)">CoC</button>
  <p class="toggleAcronym">Contents of Consciousness</p>

  <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
  <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>

  <button onclick="oneElmToggle(this)">AoL</button>
  <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>

  <button onclick="oneElmToggle(this)">MBS</button>
  <p class="toggleAcronym">Mind Body & Spirit</p>

  <button onclick="oneElmToggle(this)">QoC</button>
  <p class="toggleAcronym">Quality of Consciousness</p>

  <button onclick="oneElmToggle(this)">PFC</button>
  <p class="toggleAcronym">Pre-Frontal Cortex</p>

  <button onclick="oneElmToggle(this)">SRV</button>
  <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>

  <button onclick="oneElmToggle(this)">P/T-R</button>
  <p class="toggleAcronym">Practice/Theory-Ratio</p>

  <button id="toggleAllElms"><h2>Toggle All</h2></button>
  <p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>

<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->

<div class="C C3C">
  <h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
  <h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
  <h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
  <h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>

<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<a href="">
  <div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div>
</a>

<footer>
</footer>

</body>

</html>

关于javascript - JS 文件未加载到 html 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53569302/

上一篇：css - 无法使用 css 将静态文件(图像)设置为背景

下一篇：html - 更改pre不同部分的颜色

相关文章：

javascript - 如何在此 html 表中添加带有动态表值的行跨度？

javascript - 将距离字符串转换为数字

javascript - 如何在 iPhone/iPad 上更改视口(viewport)？

jquery - 使用 JQuery 防止重复数据

jquery - 使用 Jquery 将随机着色变量添加到样式文本链接

c# - 您必须指定一个有效的 JavaScript API 域作为此 key 配置的一部分。在领英

javascript - 如何根据多个下拉选项显示多个隐藏字段？

Android - Html 类 - fromHtml - 它是如何工作的？

php - 如何限制我的管理员使用 php 查看普通用户页面？

javascript - 一个 div 中的 X 个部分

©2024 IT工具网  联系我们