0

我想使用 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>

对不起，我发布答案是错误的..

4

3 回答 3

0

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

于 2019-05-22T21:03:32.280 回答
0

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

$(".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);
    }
);
于 2019-05-22T21:06:05.203 回答
0

正如已经指出的那样，您的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') ); 
});

参考：

  1. https://api.jquery.com/hover/
于 2019-05-22T22:48:20.613 回答