JavaScrip "Наведение курсора" не работает должным образом. Возможная ошибка jQuery, не определенная

ProgramBox

JavaScrip «Наведение курсора» не работает должным образом. Возможная ошибка jQuery, не определенная

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery

Вопрос:

Здравствуйте, некоторое время назад я получил некоторую помощь от этого форума. Я использовал предложенный код, и он отлично сработал. Однако, когда я дублирую его, он, похоже, работает неправильно. Может ли кто-нибудь помочь мне диагностировать, чего мне не хватает? Я все еще изучаю JS.

Появляется ошибка «Ошибка неперехваченной ссылки: jQuery не определен».

И, похоже, это здесь, на второй строке

 <script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl   '-bg');
});

jQuery('#approach-diagram').on('mouseleave', function() {
  jQuery('#approach-diagram').attr('class', parentEl);
});

jQuery('#approach-diagram span').on('mouseenter', function() {
  var clickEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', clickEl   '-bg');
  jQuery('.approach-text').slideUp();
  jQuery('#'   clickEl   '-text').slideDown();
  parentEl = clickEl   '-bg';
});
    </script>

Вот сайт, где он работает должным образом (https://wendyd58.sg-host.com/) Если вы прокрутите фиолетовый круг, вы увидите, как он должен действовать.

Вот где это, похоже, ни для кого не меняется. https://wendyd60.sg-host.com/ Это слой кусочков головоломки.

Вот полный код.

 <section id="approach">
    <div class="containerr">
        <div class="clear"></div>
        <div class="col-lg-06 col-md-6 col-sm-6">
            <div id="approach-diagram" class="retiremet-bg">
                <span class="retirement"></span>
                  <span class="social"></span>
                <span class="legacy"></span>
                 <span class="tax"></span>

            </div>
        </div>
        <div class="col-lg-006 col-md-6 col-sm-6">
        
            <div id="retirement-text" class="approach-text" style="display: block" >
                <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 46px;color: #d4ccb3;margin-left: -13px;"></i></div><div>  <h2>Income Planning </h2></div>
                <p>Income planning is a long-term plan for how you will manage your finances analyzing your family status, income level and financial goals.</p>  
<p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
               </div>
            <div id="social-text" class="approach-text">
                      <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 46px;color: #d4ccb3;margin-left: -13px;"></i></div><div> <h2>Investment Planning</h2></div>
                <p>Knowing the risks of retirement includes understanding the risk factors as you start to withdraw from your retirement fund. </p>  
<p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
              </div>
<div id="legacy-text" class="approach-text">
                     <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 46px;color: #d4ccb3;margin-left: -13px;"></i></div><div> <h2>Legacy Planning </h2></div>
                <p>Legacy planning allows people to choose how their wealth and assets are distributed once they pass away while avoiding probate process.  </p>  
<p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
              </div>
          
            <div id="tax-text" class="approach-text">
                     <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 46px;color: #d4ccb3;margin-left: -13px;"></i></div><div> <h2>Tax Planning</h2></div>
                <p>Tax planning is a subset of retirement planning. This efficiency may come in the form of retaining as much of your income as possible or even reducing your tax liability so that you have as much money as possible during your retirement.</p>  
<p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
</div>

              </div>
        </div>
    </div>
  <script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl   '-bg');
});

jQuery('#approach-diagram').on('mouseleave', function() {
  jQuery('#approach-diagram').attr('class', parentEl);
});

jQuery('#approach-diagram span').on('mouseenter', function() {
  var clickEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', clickEl   '-bg');
  jQuery('.approach-text').slideUp();
  jQuery('#'   clickEl   '-text').slideDown();
  parentEl = clickEl   '-bg';
});
    </script>
</section>

Любая помощь будет принята с благодарностью!

1. Где вы берете библиотеку jquery? В голове?

2. Включите библиотеку jQuery в свой html-код и повторите попытку. <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Ответ №1:

Импортируйте jQuery перед сценарием:

 <!-- This line here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl   '-bg');
});
...
...
...