0

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

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

jQuery的事件处理和.hide()和之间有交互.show()吗？我是否因为有一个初始的 CSS " display: none" 或其他任何东西而遇到麻烦？

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

4

3 回答 3

2

首先，虽然它可以工作（令人惊讶——但可能只在 Chrome 中），但协议应该全部小写（javascript:，而不是 JavaScript:)。其次，任何使用脚本的href，如果不返回false（在href中的所有脚本代码之后），都​​可能导致问题。

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

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

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);
于 2012-07-31T00:13:03.327 回答
0

您注意到的闪烁可能是因为您在开始显示第一张图像之前没有隐藏主页。您也可以考虑尝试.fadeIn('slow')作为替代方案。

此外，您需要在 dom 准备好后绑定其他点击处理程序。我建议将您的脚本从a元素的 href 中移出，并全部移到一个包含以下代码的脚本标签中。无需索引元素，因为您可以使用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();
    });
});​
于 2012-07-31T00:34:53.247 回答
0

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

这是代码：

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 中，在页面加载时摆脱链接，而是使用img带有点击处理程序和 CSS 指针样式的普通标签来显示手形。

Let me know if you like the direction I was taking this in and I'll try to help you more.

P.S. Hi Jonathan. Good to see you again. Some day I'll get you a response to our (very old, very stale) conversation.

于 2012-07-31T00:39:36.297 回答