Question

这是故事：在我完成图片轮播和导航栏后，我决定在“家”上放置一个点击事件（删除图片轮播并显示其他项目）。但是click()没有用。

更确切地说，我确信click()一直在工作（在我点击“Home”之后，它立即消失了。）

我曾尝试将remove()替换为css("display","none")或empty()，但结果相同。

这是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>untitle</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Bluefish 2.2.7" />
    <link type="text/css" rel="stylesheet" href="slider.css" />
</head>
<body>
        <div id="head">
         <ul>
            <li id="home"><a href="" class="a1">Home</a></li>
            <li class="topnav a1">
                <a href="" class="a1">Fortunate</a>
                <ul class="subnav">
                    <li><a href="#" class="menu">A</a></li>
                    <li><a href="#" class="menu">B</a></li>
                    <li><a href="#" class="menu">C</a></li>
                </ul> 
            </li>
            <li><a href="" class="a1">Breed</a></li>
            <li><a href="" class="a1">Market</a></li>
            <li><a href="" class="a1">Box</a></li>
            <li><a href="" class="a1">Message</a></li>
        </ul> 
        </div>

        <div id="container">
        <ul id="picList">
                <li><img src="1.jpg" alt="" class="a"></li>
                <li><img src="2.jpg" alt="" class="a"></li> 
                <li><img src="3.jpg" alt="" class="a"></li> 
                <li><img src="4.jpg" alt="" class="a"></li>     
            <img src="prev.png" alt="" class="prev">
            <img src="next.png" alt="" class="next">
        </div>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="myFunc.js"></script>
</body>
</html>
<script>
  $(document).ready(function(){
    var maxWidth=document.body.clientWidth;
    (function () {                                 //picture carousel
        $("#container,img.a").css("width",maxWidth)
        var intervalObj=window.setInterval(next,3000);
        var picArr=$("#picList li");
        $("#picList").css("width",picArr.length*maxWidth);

        function next(){
            $("#picList li:first-child").animate({
                marginLeft:-maxWidth
            },1000,function(){
                var temp=$(this).clone();
                $(this).remove();
                temp.css({marginLeft:"0"});
                $("#picList").append(temp);
            });
        }
        function prev(){
            var temp=$("#picList li:last-child").clone();
            $("#picList li:last-child").remove();
            temp.css({marginLeft:-maxWidth});
            $("#picList").prepend(temp);
            $("#picList li:first-child").animate({
                marginLeft:"0"
            },1000);
        }
        $("img.prev").bind("click",function(){ prev();}).hide();
        $("img.next").bind("click",function(){ next();}).hide();

        $("#container").mouseover(function(){
          $("img.prev,img.next").show();
            window.clearInterval(intervalObj);

        });
        $("#container").mouseout(function(){
            $("img.prev,img.next").hide();
            intervalObj=window.setInterval(next,2000);

        }); 
    })();

    (function(){    $("ul.subnav").hide();
        $(".topnav").hover(function(){
            $(".subnav").slideDown();}             //menu slideDown
        ,function(){$(".subnav").slideUp();});

    })();

        $("#home").click(function(){
        // $("#container").css("height","100px");  
        // this is my test,it works but just for an instant
        $("#container").remove();
        });
    });
    </script>

Answer 1

我尝试粘贴您的代码，我注意到的第一件事是您要阻止锚链接的默认操作。这样它就不会“闪烁”屏幕。

那你到底想要做什么？只需删除#container元素？

$("#home").click(function(event){
    event.preventDefault();
    // $("#container").css("height","100px");  
    // this is my test,it works but just for an instant
    $("#container").remove();
});

Answer 2

单击该链接将重新加载页面。因此，您必须首先阻止此操作才能看到所需的结果

 $("#home a").on("click",function(e){
     e.preventDefault();
     $("#container").hide(); //or remove
        //other codes if necessary
  });

Answer 3

我有点沮丧（阅读很无聊）并对你的转盘设置进行了全面改写，使其更具可读性和优化性，o当然我修复了删除。

看看：https://jsfiddle.net/849wg8wv/

代码：

$(document).ready(function(){
function Carrousel(container, maxWidth, pictures) {
    var self = this,
        ul = $('<ul></ul>'),
        interval = 3000,
        intervalObj,
        animationDuration = 1000,
        listItems = [],
        prevBtn = $('<button class="prev">previous</button>'),
        nextBtn = $('<button class="next">next</button>');

    prevBtn.hide();
    nextBtn.hide();

    container.append(ul);

    pictures.forEach(function(src) {
        var li = $('<li></li>'),
            img = $('<img src="'+src+'"></img>');

        img.css('width', maxWidth);

        li.append(img);
        ul.append(li);

        listItems.push(li);
    });

    ul.css('width', listItems.length * maxWidth);
    ul.append(prevBtn);
    ul.append(nextBtn);

    this.next = function () {
        var firstSlide = listItems[0],
            lastSlide = listItems[listItems.length-1];

        firstSlide.animate(
            { marginLeft: -maxWidth },
            animationDuration,
            function () {
                firstSlide.detach().insertAfter(lastSlide);
                firstSlide.css({ marginLeft: 0} );

                listItems.shift();
                listItems.push(firstSlide);
            }
        );
    }

    this.prev = function(){
        var firstSlide = listItems[0],
            lastSlide = listItems[listItems.length-1];

        lastSlide.animate(
            { marginLeft: -maxWidth },
            animationDuration,
            function () {
                lastSlide.detach().insertBefore(firstSlide);
                lastSlide.css({ marginLeft: 0 })

                listItems.pop();
                listItems.unshift(lastSlide);
            }
        );
    }

    this.remove = function () {
        clearInterval(intervalObj);
        container.remove();
    }

    this.start = function () {
        intervalObj = setInterval(self.next, interval);
    }

    this.stop = function () {
        clearInterval(intervalObj);
    }

    prevBtn.bind('click', self.prev);
    nextBtn.bind('click', self.next);

    container.mouseover(function() {
        prevBtn.show();
        nextBtn.show();
        self.stop();
    });

    container.mouseout(function () {
        prevBtn.hide();
        nextBtn.hide();
        self.start();
    });

    this.start();
};

var carousel = new Carrousel(
    $('#container'),
    300,
    [
        'http://www.relatably.com/m/img/funniest-cat-memes/cat-memes-10.png',
        'http://www.relatably.com/m/img/funniest-cat-memes/Top-30-Funny-Cat-Memes-Hilarious.jpg',
        'http://www.relatably.com/m/img/funniest-cat-memes/Funny-Cat-Pictures-with-Captions-25.jpg',
        'http://www.relatably.com/m/img/funniest-cat-memes/Funny-Cat-Meme-Work-1.jpg'
    ]
);

$("#home").on('click', function(e){
  e.preventDefault();
  carousel.remove();
});
});

jQuery .click（）没有用

3 个答案: