Вставьте HTML с внешней страницы при наведении курсора с помощью jquery - PullRequest
Новая
       15

Вставьте HTML с внешней страницы при наведении курсора с помощью jquery

0 голосов
/ 22 мая 2019

Я хотел бы вставить HTML из внешнего файла при наведении курсора с помощью jquery. Это мой код: 

$(".hoverCont").hover(function(){
var html = $(this).children().detach();
$(this).load(theme_directory + '/sections-html/home.html');
}, function(){
$(this).prepend(html); });

Я могу загрузить внешний html, но не могу повторно вставить предыдущий html, когда мышь покидает div ... как я могу это сделать?

Это код, который мне нужно сохранить и заменить ... 

<div class="row hoverCont">
                        <div class="col-lg-9 d-flex flex-row p-5 minH hideDiv">
                            <div class="col-lg-5 d-flex">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h2 class="p-2 bigH2 gray">Lorem ipsum dolor sit amet,<br /> consectetur
                                            adipiscing
                                        </h2>
                                    </div>
                                    <div class="col-lg-12">
                                        <p class="p-2 gray1">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor
                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis
                                            nostrud
                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 d-flex backGray2 p-5 minH hideDiv hover">
                            <h2 class="p-2 bigH2 gray">
                                <span class="mb-3">Chi siamo</span>
                                <span class="secondH2">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                    do eiusmod tempor.
                                </span>
                            </h2>
                        </div>
                    </div>

А это HTML-код из внешнего файла ... 

<div class="col-lg-6 d-flex flex-row p-5 minH">
    <div class="col-lg-12 d-flex">
       <div class="row">
          <div class="col-lg-12">
             <h2 class="p-2 bigH2 gray">Lorem ipsum dolor sit amet,<br /> consectetur
                adipiscing
             </h2>
          </div>
          <div class="col-lg-12">
             <p class="p-2 gray1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </p>
          </div>
       </div>
    </div>
 </div>
 <div class="col-lg-6 d-flex backGray2 p-5 minH hover" style="background-image: url('http://ribel.local/wp-content/uploads/2019/05/ribelHover.jpg'); background-size: cover; ">
    <div class="col-lg-6 d-flex">
    </div>
    <div class="col-lg-6 d-flex">
        <div class="row">
            <div class="col-lg-12 mb-5">
                <h2 class="p-2 bigH2 white">Lorem ipsum dolor sit amet,<br /> consectetur
                                                adipiscing
                                            </h2>
            </div>
            <div class="col-lg-10 mt-5">
                <a href="" class="aStyle">
                                                Scopri chi siamo<br />
                                            </a>
            </div>
            <div class="col-lg-2 mt-5">
                <a href="#">
                    <svg class="arrRight arrowWhite" xmlns="http://www.w3.org/2000/svg" width="84.866" height="14.709" viewBox="0 0 84.866 14.709">
                        <g id="arrow-right" transform="translate(-226 -16.716)">
                            <path id="right-arrow" d="M-4.482,4.9a.739.739,0,0,0-1.054,0,.744.744,0,0,0,0,1.044l5.346,5.346-81.587.039a.734.734,0,0,0-.738.739.743.743,0,0,0,.738.749l81.587-.039-5.346,5.336a.757.757,0,0,0,0,1.054.739.739,0,0,0,1.054,0l6.611-6.611a.726.726,0,0,0,0-1.044Z" transform="translate(308.516 12.042)" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

Извините, я ошибся, чтобы опубликовать ответ ..

Ответы [ 3 ]

0 голосов
/ 23 мая 2019

Чтобы избежать потенциальных конфликтов, вы можете использовать элемент данных, чтобы установить переменную для каждого соответствующего элемента поиска. 

$(".hoverCont").hover(
    function(){
        var $this = $(this);

        $this.data('originalChildren', $this.children().detach());
        $this.load(theme_directory + '/sections-html/home.html');
    }
    , function(){
        var $this = $(this);

        $this.prepend($this.data('originalChildren'));
        $this.data('originalChildren', null);
    }
);
0 голосов
/ 23 мая 2019

Как уже было указано, ваш обратный вызов handlerOut не может видеть переменную html, поскольку она определена в обратном вызове handlerIn. Вы можете использовать предложенный метод объявления и инициализации его вне hover() или использовать атрибут данных следующим образом:

Объявить и инициализировать 

var html = '';
$(".hoverCont").hover(function() {
  html = $(this).children().detach();
  $(this).load(theme_directory + '/sections-html/home.html');
}, function() {
  $(this).html(html); 
});

Использование атрибута данных 

$(".hoverCont").hover(function() {
  var html = $(this).children().detach();
  $(this).data('html', html);
  $(this).load(theme_directory + '/sections-html/home.html');
}, function() {
  $(this).html( $(this).data('html') ); 
});

Ref:

  1. https://api.jquery.com/hover/
0 голосов
/ 23 мая 2019

Попробуйте использовать var html = '' вне события наведения мыши .. затем внутри наведения используйте html = без var

Это пример 

var HTML = ''; // define the HTML outside the hover
$(document).on('mouseenter' , '.hoverCont:not(.mouseIn)' , function(){
    var $this = $(this);
    HTML = $this.html(); // updated HTML
    $this.addClass('mouseIn').html('<div>New HTML Loaded from Load function</div>');
    // when you trying to change the previous line to ,load 
    // $this.load(theme_directory + '/sections-html/home.html' , function(){ $this.addClass('mouseIn');  });
});
$(document).on('mouseout' , '.hoverCont.mouseIn' , function(){
   $(this).removeClass('mouseIn').html(HTML);
});
.hoverCont{
  min-height : 200px;
  background : yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row hoverCont">
    <div class="col-lg-9 d-flex flex-row p-5 minH hideDiv">
        <div class="col-lg-5 d-flex">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="p-2 bigH2 gray">Lorem ipsum dolor sit amet,<br /> consectetur
                        adipiscing
                    </h2>
                </div>
                <div class="col-lg-12">
                    <p class="p-2 gray1">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis
                        nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 d-flex backGray2 p-5 minH hideDiv hover">
        <h2 class="p-2 bigH2 gray">
            <span class="mb-3">Chi siamo</span>
            <span class="secondH2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor.
            </span>
        </h2>
    </div>
</div>

Я использовал mouseenter и mouseout события вместо hover, чтобы упростить управление событиями по отдельности И я использовал add/removeClass в коде, чтобы переменная HTML не могла перехватить загруженный html

...