我在jQuery事件处理和隐藏/显示图像元素时做错了什么？ [关闭]

Question

我正在http://icon.stornge.com上的一个画廊工作，其中的目的是让用户点击主页上的链接，然后有第一个图像显示，然后当用户点击时图像，下一个限制加载，依此类推，直到最后一个图像。

相反的是，第一次点击加载图像，首先是一个条子，然后是整个图像（这是jQuery.load('slow')在图像上的预期行为吗？ </a> ），然后点击第一个图像似乎调用事件处理程序（如果我按预期显示alert() ），但第一个图像保留在其位置，第二个图像不会出现。 Chrome的控制台不会注册任何JavaScript错误。

是否有jQuery的事件处理之间的相互作用和.hide()和.show() 我有一个初始CSS“ display: none ”或其他任何东西我遇到麻烦了吗？

我应该更改什么，以便点击一个图像加载下一个图像？

Answer 1

首先，尽管它有效（令人惊讶的是 - 但是，可能只在Chrome中）协议应该全部小写（javascript：，而不是JavaScript :)。 其次，任何使用脚本的href都不会返回false（在href中的所有脚本代码之后），可能会导致问题。

无论如何，只需使用以下内容：

1- 将类（例如“图像切换”）应用于要触发图像显示的图像和链接。 将类“icon”添加到锚点。

2-将当前href更改为＃或javascript：return false;

3-从图像中删除ID（W3C HTML规范明确指出ID值必须以字母字符开头;您可以使用数字 - 但是，您无法使用数字启动ID）。

4-（可选）将所有图像（旋转）放入新的DIV（称之为“图像”）。

将此代码添加到您的页面（在脚本块中）：

(function($){
  var imageIndex = 0;
  $(function(){
    var $homepage = $("#homepage"), 
        $images = $(".icon");
    $images.click(function(event){
      event.preventDefault();
      $homepage.hide("slow");
      $images.hide().eq(imageIndex++).show("slow");
    });
  });
})(jQuery);

Answer 2

您注意到的闪烁可能是因为在您开始显示第一张图像之前，您不会隐藏主页。 您也可以考虑尝试使用.fadeIn('slow') 。

此外，您需要在dom准备好后绑定其他单击处理程序。 我建议将脚本从元素的href中移出，并将a全部移动到包含以下代码的一个脚本标记中。 无需索引元素，因为您可以使用jQuery .next()方法来访问下一个图标。

您更正/修改了html的一些问题。 这是效果的演示 。

HTML：

<html>
    <head>
        <title>Icon Library</title>
        <style>
            /*...*/
        </style>
    </head>
    <body>
        <div id="homepage">
        <h1>Icon Library</h1>
        <p><del>Favorites</del><br>
        <a href="#" id="icons">Browse icons</a><br>
        <a href="http://JonathansCorner.com/">by CJSH</a><br>
        </p>
        </div>
        <img class="icon" src="icon/icon0.png">
        <img class="icon" src="icon/icon1.png">
        <img class="icon" src="icon/icon2.png">
        <img class="icon" src="icon/icon3.png">
        <script>
            /*...*/
        </script>
</body></html>

使用Javascript：

$(document).ready(function() {
    $("#icons").click(function(e) {
        e.preventDefault();
        $('#homepage').hide();
        $('img.icon:first').show('slow');
    });
    $('img.icon').click(function() {
        $(this).hide();
        $(this).next('img').show();
    });
});​

Answer 3

请看这个小提琴 。 它向您展示了组织页面的合理方式。 我希望它对你有用。

这是代码：

var currentIcon = -1;
function nextIcon() {
    currentIcon = currentIcon % 3 + 1;
    $('#icons img')
       .attr('src', $('#iconlibrary img:eq(' + currentIcon + ')').attr('src'));
}

$('#leftpanel a').on('click', function() {
    if ($(this).parent().hasClass('disabled')) { return; }
    $(this)
        .blur()
        .parent()
        .addClass('selected')
        .siblings()
        .removeClass('selected');                  
    $('#' + $(this).data('id'))
    .show()
    .siblings()
    .hide();
    return false;
});

$('#icons a').on('click', nextIcon);
nextIcon();

嗯，我刚刚意识到你想要慢慢淡出。让我考虑一下。 单击时获得活动选区边框的图像也有一个小问题。 如果您担心可用性，那么我会留下链接并将它们提交给服务器，该服务器显示一个显示正确图像的新页面。 然后，在javascript中，在页面加载中删除链接，而是使用带有单击处理程序和CSS指针样式的普通img标签来进行手工显示。

如果你喜欢我的方向，请告诉我，我会尽力帮助你。

PS嗨乔纳森。 很高兴再次见到你。 有一天，我会让你回答我们（非常古老，非常陈旧）的谈话。