JQuery переключает все абзацы на 1 кнопку не работает - PullRequest
Новая
       5

JQuery переключает все абзацы на 1 кнопку не работает

0 голосов
/ 28 ноября 2018

Я пытаюсь добиться эффекта открытия / закрытия всех элементов абзаца при нажатии последней кнопки (Toggle All).Это первый раз, когда я пытаюсь использовать jQuery, и хотя он кажется довольно простым, он не работает, как я и надеялся.

Это мой код: 

$(document).ready(function() {
  $("#toggleAll p").click(function() {
    $(".toggleAcronym").toggle(slow);
  });
});
#p6Acronyms {
  width: 30%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 10px;
}

#p6Acronyms button {
  width: 100%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
  background: rgb(0, 152, 223);
  color: azure;
}

#p6Acronyms button:hover {
  background: rgb(0, 47, 255);
  color: antiquewhite;
}

#p6Acronyms p {
  display: none;
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="p6Acronyms">
    <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 (=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="toggleAll"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
  </div>
</body>

1 Ответ

0 голосов
/ 28 ноября 2018

Вы были так близко, что "медленный" аргумент, передаваемый методу toggle(), должен быть заключен в кавычки, такие как: 

$(".toggleAcronym").toggle('slow');
___________________________^____^

И вам нужно прикрепить событие click к кнопке вместо абзацавнутри него: 

$("#toggleAll").click(function() {

Вместо: 

$("#toggleAll p").click(function() {
______________^ Should be removed


$(document).ready(function() {
  $("#toggleAll").click(function() {
    $(".toggleAcronym").toggle('slow');
  });
});
#p6Acronyms {
  width: 30%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 10px;
}

#p6Acronyms button {
  width: 100%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
  background: rgb(0, 152, 223);
  color: azure;
}

#p6Acronyms button:hover {
  background: rgb(0, 47, 255);
  color: antiquewhite;
}

#p6Acronyms p {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p6Acronyms">
  <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 (=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="toggleAll"><h2>Toggle All</h2></button>
  <p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
</div>
...