与jQuery悬停在外部页面上插入HTML

我想与jQuery悬停的外部文件插入HTML。这是我的代码：

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

我可以加载外部HTML，但是当鼠标离开DIV时，我不能重新插入以前的HTML ...我该怎么办？

这是我需要保存和替换的代码...

<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>

对不起，发布答案我错了。

为了避免潜在的冲突，您可以使用数据元素为每个相关的盘旋项目设置变量。

$(".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);
    }
);

尝试在悬停事件之外使用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事件，而不是悬停，使得更容易单独控制事件，并且我在代码中使用add/removeClass来防止HTML变量捕获已加载的HTML}

正如指向您的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') ); 
});

参考：

https://api.jquery.com/hover/

相关内容

最新更新

热门标签：