Как сделать, чтобы прокручиваемая буква прокрутилась до соответствующего html-контейнера с помощью jQuery - PullRequest
Новая
       1

Как сделать, чтобы прокручиваемая буква прокрутилась до соответствующего html-контейнера с помощью jQuery

0 голосов
/ 09 ноября 2019

Я пытаюсь завершить свою вики-страницу и хотел бы реализовать следующую функцию.

Когда кто-то нажимает на букву в алфавитной строке, я бы хотел, чтобы браузер прокрутил до соответствующей буквы в вики. столбец (если возможно с некоторой плавной анимацией).

Я получаю следующую ошибку: 

Wiki_app.js:8 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
    at HTMLDivElement.<anonymous> (Wiki_app.js:8)
    at HTMLDivElement.dispatch (jquery.min.js:2)
    at HTMLDivElement.v.handle (jquery.min.js:2)


$(".letterInBar").click(function() {
  let letter = $(this).html();
  console.log(letter);
  scrollTo(".letter").html(letter);
});
.headingWiki {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  font-size: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 35px;
}

.letterBar {
  position: relative;
  margin: auto;
  margin-top: 45px;
  display: inline-block;
  height: 30px;
  width: 100%;
  padding-left: 50%;
}

.letterWrapper {
  position: absolute;
  width: 50%;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
}

.letterInBar {
  float: left;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  height: 100%;
  padding-right: 7px;
}

.letterInBar:hover {
  cursor: pointer;
  font-size: 30px;
  color: #30A36C;
  font-weight: bold;
}

.letter {
  font-family: 'Hind', sans-serif;
  color: #4D349C;
  font-weight: bold;
  font-size: 45px;
  padding-left: 5px;
  padding-top: 5px;
}

.listWrapper {
  position: relative;
  margin: auto;
  margin-top: 45px;
  width: 30%;
  background-color: #F7F7F7;
  border-radius: 15px;
}

.keyPairWrapper {
  padding-bottom: 5px;
  padding-left: 5px;
}

.Keyword {
  width: 280px;
  height: 2.2vh;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  background-color: #30A36C;
  color: #FFF;
  border-radius: 15px;
  padding-left: 10px;
  padding-top: 4px;
}

.Content {
  display: none;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  background-color: #FFF;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  border: 1.5px solid;
  border-radius: 15px;
  border-color: #2E1A6D;
}

.Keyword:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="letterBar">
  <div class="letterWrapper">
    <div class="letterInBar">A</div>
    <div class="letterInBar">B</div>
    <div class="letterInBar">C</div>
    <div class="letterInBar">D</div>
    <div class="letterInBar">E</div>
    <div class="letterInBar">F</div>
    <div class="letterInBar">G</div>
    <div class="letterInBar">H</div>
    <div class="letterInBar">I</div>
    <div class="letterInBar">J</div>
    <div class="letterInBar">K</div>
    <div class="letterInBar">L</div>
    <div class="letterInBar">M</div>
    <div class="letterInBar">N</div>
    <div class="letterInBar">O</div>
    <div class="letterInBar">P</div>
    <div class="letterInBar">Q</div>
    <div class="letterInBar">R</div>
    <div class="letterInBar">S</div>
    <div class="letterInBar">T</div>
    <div class="letterInBar">U</div>
    <div class="letterInBar">V</div>
    <div class="letterInBar">W</div>
    <div class="letterInBar">X</div>
    <div class="letterInBar">Y</div>
    <div class="letterInBar">Z</div>
  </div>
</div>

<div class="listWrapper">



  <div class="letter">A</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Arbitrage</div>
    <div class="Content">The simultaneous purchase or sale of a financial product in order to take advantage of small price differentials between markets.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Ask Price</div>
    <div class="Content">The ask price is the price at which the market (or your broker) will sell a specific currency pair to you. Thus, at the ask price you can buy the base currency from your broker.</div>
  </div>


  <div class="letter">B</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Base Rate</div>
    <div class="Content">The lending rate of the central bank of any given country.</div>
  </div>


  <div class="keyPairWrapper">
    <div class="Keyword">Bears</div>
    <div class="Content">Not animals, but traders who expect prices to decline and may be holding short positions.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bid Price</div>
    <div class="Content">The bid is the price at which the market (or your broker) will buy a specific currency pair from you. Thus, at the bid price, a trader can sell the base currency to their broker.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOC</div>
    <div class="Content">The central bank of Canada</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOE</div>
    <div class="Content">The central bank of England (UK)</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOJ</div>
    <div class="Content">The central bank of Japan</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Broker</div>
    <div class="Content">Companies that act as an intermediary, bringing buyers and sellers together for a fee or commission. </div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bulls</div>
    <div class="Content">Not animals, but traders who expect prices to rise and therefor holding long positions.</div>
  </div>



  <div class="letter">C</div>



  <div class="letter">D</div>



  <div class="letter">E</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Exchange Rate</div>
    <div class="Content">The value of one currency expressed in terms of another. For example, if GBP/USD is 1.5500, 1 Pound is worth US$ 1.5500.</div>
  </div>
  
  <div class="letter">F</div>


  <div class="letter">G</div>



  <div class="letter">H</div>


  <div class="letter">I</div>


  <div class="letter">J</div>


  <div class="letter">K</div>



  <div class="letter">L</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Leverage</div>
    <div class="Content">Leverage is the ability to gear your account into a position greater than your total account margin. For instance, if a trader has $1,000 of margin in his account and he opens a $100,000 position, he leverages his account by
      100 times, or 100:1. Increasing your leverage magnifies both gains and losses. Different brokers off different leverage levels. Use them wisely. </div>
  </div>

 </body>
  
 </html>

Ответы [ 2 ]

1 голос
/ 09 ноября 2019

Проблема, с которой вы столкнулись, заключается в том, что .letter в scrollTo(".letter").html(letter) не является правильным селектором для того, что вы пытаетесь выполнить, а также не является правильным использованием метода scrollTo, который принимает координаты вместо строки в качествеПараметры, наконец, метод html, который вы используете, предназначен только для получения или установки html-содержимого элемента, здесь нет селектора jquery, который возвращает элемент с заданным текстом в качестве html-содержимого, поэтому вы можете использоватьВместо этого используется метод «filter», также вам необходимо использовать метод jquery animate для добавления плавной анимации, например: 

$(".letterInBar").click(function() {
  let letter = $(this).html();

  let matchText = function() {
    return $(this).text() === letter;
  }

  $('html, body').animate({
        scrollTop: $(".letter").filter(matchText).offset() ? 
         $(".letter").filter(matchText).offset().top : null
   }, 2000);
});
.headingWiki {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  font-size: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 35px;
}

.letterBar {
  position: relative;
  margin: auto;
  margin-top: 45px;
  display: inline-block;
  height: 30px;
  width: 100%;
  padding-left: 50%;
}

.letterWrapper {
  position: absolute;
  width: 50%;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
}

.letterInBar {
  float: left;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  height: 100%;
  padding-right: 7px;
}

.letterInBar:hover {
  cursor: pointer;
  font-size: 30px;
  color: #30A36C;
  font-weight: bold;
}

.letter {
  font-family: 'Hind', sans-serif;
  color: #4D349C;
  font-weight: bold;
  font-size: 45px;
  padding-left: 5px;
  padding-top: 5px;
}

.listWrapper {
  position: relative;
  margin: auto;
  margin-top: 45px;
  width: 30%;
  background-color: #F7F7F7;
  border-radius: 15px;
}

.keyPairWrapper {
  padding-bottom: 5px;
  padding-left: 5px;
}

.Keyword {
  width: 280px;
  height: 2.2vh;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  background-color: #30A36C;
  color: #FFF;
  border-radius: 15px;
  padding-left: 10px;
  padding-top: 4px;
}

.Content {
  display: none;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  background-color: #FFF;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  border: 1.5px solid;
  border-radius: 15px;
  border-color: #2E1A6D;
}

.Keyword:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="letterBar">
  <div class="letterWrapper">
    <div class="letterInBar">A</div>
    <div class="letterInBar">B</div>
    <div class="letterInBar">C</div>
    <div class="letterInBar">D</div>
    <div class="letterInBar">E</div>
    <div class="letterInBar">F</div>
    <div class="letterInBar">G</div>
    <div class="letterInBar">H</div>
    <div class="letterInBar">I</div>
    <div class="letterInBar">J</div>
    <div class="letterInBar">K</div>
    <div class="letterInBar">L</div>
    <div class="letterInBar">M</div>
    <div class="letterInBar">N</div>
    <div class="letterInBar">O</div>
    <div class="letterInBar">P</div>
    <div class="letterInBar">Q</div>
    <div class="letterInBar">R</div>
    <div class="letterInBar">S</div>
    <div class="letterInBar">T</div>
    <div class="letterInBar">U</div>
    <div class="letterInBar">V</div>
    <div class="letterInBar">W</div>
    <div class="letterInBar">X</div>
    <div class="letterInBar">Y</div>
    <div class="letterInBar">Z</div>
  </div>
</div>

<div class="listWrapper">



  <div class="letter">A</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Arbitrage</div>
    <div class="Content">The simultaneous purchase or sale of a financial product in order to take advantage of small price differentials between markets.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Ask Price</div>
    <div class="Content">The ask price is the price at which the market (or your broker) will sell a specific currency pair to you. Thus, at the ask price you can buy the base currency from your broker.</div>
  </div>


  <div class="letter">B</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Base Rate</div>
    <div class="Content">The lending rate of the central bank of any given country.</div>
  </div>


  <div class="keyPairWrapper">
    <div class="Keyword">Bears</div>
    <div class="Content">Not animals, but traders who expect prices to decline and may be holding short positions.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bid Price</div>
    <div class="Content">The bid is the price at which the market (or your broker) will buy a specific currency pair from you. Thus, at the bid price, a trader can sell the base currency to their broker.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOC</div>
    <div class="Content">The central bank of Canada</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOE</div>
    <div class="Content">The central bank of England (UK)</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOJ</div>
    <div class="Content">The central bank of Japan</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Broker</div>
    <div class="Content">Companies that act as an intermediary, bringing buyers and sellers together for a fee or commission. </div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bulls</div>
    <div class="Content">Not animals, but traders who expect prices to rise and therefor holding long positions.</div>
  </div>



  <div class="letter">C</div>



  <div class="letter">D</div>



  <div class="letter">E</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Exchange Rate</div>
    <div class="Content">The value of one currency expressed in terms of another. For example, if GBP/USD is 1.5500, 1 Pound is worth US$ 1.5500.</div>
  </div>
  
  <div class="letter">F</div>


  <div class="letter">G</div>



  <div class="letter">H</div>


  <div class="letter">I</div>


  <div class="letter">J</div>


  <div class="letter">K</div>



  <div class="letter">L</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Leverage</div>
    <div class="Content">Leverage is the ability to gear your account into a position greater than your total account margin. For instance, if a trader has $1,000 of margin in his account and he opens a $100,000 position, he leverages his account by
      100 times, or 100:1. Increasing your leverage magnifies both gains and losses. Different brokers off different leverage levels. Use them wisely. </div>
  </div>

 </body>
  
 </html>
0 голосов
/ 09 ноября 2019

Вы забыли точку в своем селекторе jQuery:

$ ("letterInBar")

должно быть

$ (". LetterInBar")

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...