如何从 jquery 滑块中隐藏 H2答案

【问题标题】：how to hide H2 from jquery slider如何从 jquery 滑块中隐藏 H2
【发布时间】：2014-01-07 21:34:32
【问题描述】：

我想将 h2 隐藏在滑块的图像上而不是链接

注册和更多详情按钮很重要。

我只想在滑块上隐藏“黑色文本 H2”。

我从这里得到了 jquery 滑块

http://designm.ag/tutorials/image-rotator-css-jquery/

这是我的 jquery 代码

<script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {  

  // Comment out this line to disable auto-play
    intervalID = setInterval(cycleImage, slidetime);

    $(".main_image .desc").show(); // Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

    // Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function(){ 
        // Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block    

        if ($(this).is(".active")) {  // If it's already active, then...
            return false; // Don't click through
        } else {
            // Animate the Teaser               
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 150 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }

        $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
        $(this).addClass('active');  // add class of 'active' on this list only
        return false;

    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });

    // Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });

    // Function to autoplay cycling of images
    // Source: http://stackoverflow.com/a/9259171/477958
    function cycleImage(){
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
    var currentImage = $(".image_thumb ul li.active");


    if(onLastLi){
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }

    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");

        // Duplicate code for animation
        var imgAlt = $(nextImage).find('img').attr("alt");
        var imgTitle = $(nextImage).find('a').attr("href");
        var imgDesc = $(nextImage).find('.block').html();
        var imgDescHeight = $(".main_image").find('.block').height();

        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
      $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
      $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
  };

$('.main_image').on("mouseover",function(){
clearInterval(intervalID);
});

$('.main_image').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});

$('.image_thumb ul li').on("mouseover",function(){
  clearInterval(intervalID);
});

$('.image_thumb ul li').on("mouseout",function(){
  intervalID = setInterval(cycleImage, slidetime);
});

});// Close Function
</script>

【问题讨论】：

$(".main_image h2").hide(); 或在 CSS 中：.main_image h2 { display: none; }
它正在工作，谢谢兄弟:)
你为什么不干脆把H2标签去掉？
@jtheman 问题解决了，谢谢 :)

标签： jquery html css

【解决方案1】：

您可以通过几种方式解决此问题。
你可以使用 jQuery .hide() http://api.jquery.com/hide/ ：

 $(".main_image h2").hide();

或者删除http://api.jquery.com/remove/：

 $(".main_image h2").remove();

或者你可以使用 CSS：

.main_image h2 { display: none; }

或者如 jtheman 所述，删除 HTML 模板中的整个元素。

【讨论】：