Question

我试过在jQuery中编程滑块。此滑块位于主页面的中心位置，但隐藏。当我点击特定图像时，滑块转动可见，滑块运行完美。当我点击“body”标签时，此滑块会淡出。

问题：当我在上述图像上点击两次时，滑块出现1秒钟并立即消失。

“解决方案”是刷新网页，但我不想这样做。

这是我的HTML代码：

<div id='slides'> 
            <ul>
                <li><img src="./img/davidMerinas.png" title="David Merinas"/></li>
                <li><img src="./img/davidMuñoz.png" title="David Muñoz"/></li>
                <li><img src="./img/enriquePalacios.png" title="Enrique Palacios"/></li>
                <li><img src="./img/fernandoHidalgo.png" title="Fenando Hidalgo"/></li>
                <li><img src="./img/franAranda.png" title="Fran Aranda"/></li>
                <li><img src="./img/ignacioAlvarez.png" title="Ignacio Alvarez"/></li>
                <li><img src="./img/iknx.png" title="IKNX"/></li>
                <li><img src="./img/javiSanchez.png" title="Javi Sanchez"/></li>
                <li><img src="./img/juanMartos.png" title="Juan Martos"/></li>
                <li><img src="./img/juanMolina.png" title="Juan Molina"/></li>
                <li><img src="./img/juanRomero.png" title="Juan Romero"/></li>
                <li><img src="./img/miguelArroyo.png" title="Miguel Arroyo"/></li>
                <li><img src="./img/miguelLopez.png" title="Miguel Lopez"/></li>
                <li><img src="./img/nicolasGarcia.png" title="Nico Garcia"/></li>
                <li><img src="./img/rafaJurado.png" title="Rafa Jurado"/></li>
                <li><img src="./img/sergioGomez.png" title="Sergio Gomez"/></li>
            </ul>
            <div class="clear"></div>
        </div>

这是我的jQuery函数：

function runCarrusel(){
    $("#accordion img").click(function(){
        $("#slides").show("bind",callback);
    });
    return false;
}
function callback(){
    $("body").click(function(){
        $("#slides").fadeOut();
    });
    return false;
}

function carrusel(){
    var t = setInterval(function(){
        $("#slides ul").animate({marginLeft:-300},1000,function(){
            $(this).find("li:last").after($(this).find("li:first"));
            $(this).css({marginLeft:0});
        })
    },5000);
    return false;
}

我一直在寻找解决方案，但我不可能这样做。感谢。

问题是处理程序事件传播到 body 。使用 retun false 句子中断事件，我们可以点击更多次。

Answer 1

单击以显示滑块时，单击事件会向上传播到正文，从而隐藏滑块。您应该停止点击事件传播：

$("#accordion img").click(function(){
    $("#slides").show("bind",callback);
    return false; // This prevents the event from propagating.
});

另外，因为您将click-handler连接到callback()函数中的body元素，所以每次调用该函数时都会附加一个处理程序。你应该只附加一次处理程序。

Answer 2

您不需要两个单独的点击处理程序。相反，检查click事件的目标并执行不同的操作：

$('body').on('click', function(event) {
  var target = $(event.target);
  if (target.is('.accordion .slide')) {
    alert("show slide");
  } else {
    alert("hide slide");
  }
});

http://jsfiddle.net/MLBkA/

打开滑块jquery两次不起作用

2 个答案: