在容器div中插入文本

Question

我正在使用一个简单的jQuery图像滑块(Owl Carousel)来显示带有照片的会议演讲者列表，并且我正在尝试找到一种方法将与每个演讲者相关的文本覆盖到放置在滑块上方的div上。我有一个模型页在这里。正如你在模型上看到的，我有两个主要的div——即div#sit和div#carousel-sit;在前者，我有一个容器与类.sit-quote-container，我想引用文本/标记注入。我希望这个覆盖文本从每个演讲者存在的.sit-quote类的段落元素中拉出。

除了在容器div中显示适当文本的问题外，我看到在每张幻灯片中放置.sit-quote段落会导致演讲者名称(下面的灰色框)下出现空白，我不知道为什么会发生这种情况，因为我已经将.sit-quote设置为display:none。我想知道我是否需要将包含引号的元素完全移出滑块标记(?)

至于实际的悬停功能，这是我目前为止所拥有的，在另一个so用户的帮助下;但它似乎不工作:

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container");
}, function(){
    $(".sit-quote-container").html(""); // this clears the content on mouseout
});

最后，我希望报价在主div内淡入/淡出。感谢您的帮助，如果我需要进一步澄清这里的目的，请告诉我。

Answer 1

你应该首先看到这个引号试试这个:

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
    $(".sit-quote-container").html("");
});

如果你想淡入:

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
    $(".sit-quote-container").html("");
});

Answer 2

使用下面的脚本从悬停项目的 .sit-quotep标签中提取文本，并将其显示在.sit-quote-container

如果需要将引号括在para标签中，为了避免复杂性，使用不同的类名，在本例中为.sit-quote_inner。

CSS: .sit-quote_inner{ display:none; }

JS

    $('.sit-carousel-container .owl-item').hover(function(){
       var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
       quote = '<p class="sit-quote_inner">' + quote + '</p>';
      $('.sit-header .sit-quote-container').html(quote);
       $('.sit-quote_inner').fadeIn(); //Add this
    },function(){
      $('.sit-header .sit-quote-container').html('');
    });

Answer 3

旋转木马似乎在动态地注入幻灯片的克隆。在这种情况下，您可能希望委托您的事件处理程序，以便它与动态生成的幻灯片一起工作。

同样，如果你想要淡出文本，你应该在fafeOut的完整回调中删除它，而不是简单地清空html。

$(document).on("mouseenter",".slide-sit",function() {
   var clone = $(this).find(".sit-quote").clone();
   clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
   $(".sit-quote-container")
   .find(".sit-quote")
   .fadeOut("slow",function(){ // Fadeout and then remove the text
      $(this).remove();
  })
});

空白(灰色背景)是.slide-sit的背景，这是可见的，由于margin-bottom: 15px;应用于包含名称的段落(样式规则.item p main.css行67似乎)，删除这将解决这个问题。

如果你把.slide-sit放在.sit-quote-container里面会更好，这样你就可以使用下面的脚本正确地淡出它。

$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
    var content = $(this).find(".sit-quote").html();
   (".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
   $(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});