1

我有一个 img 标签（id “image”）。img 的 src 是使用 jQuery 分配的（每个图像都有单独的按钮，无法显示）。有一个按钮可以前进到下一张图片（将其视为幻灯片）。“下一步”按钮只是一个锚标记，带有指向另一个 jQuery 函数的 href。

当最后一张图片占据img标签的src时，我想删除锚标签的href（'next'按钮）。如果不是最终图片是 img 标记的 src，我希望 'next' 按钮通过 'active' （具有其他 jQuery 函数的 href）。

页面加载时，img 标签没有 src。

我编写了以下代码，认为它会起作用：

<script style="text/javascript">
$(document).ready(function () {
    var src = ($("#image").attr("src"));
    if  (src == "images/big/7.jpg") {

        $("#next").attr("href","");

    } else {

        $("#next").attr("href", "javascript:nextImage()");

    }
});
</script>

可悲的是它没有。当 img 的 src 为“images/big/7.jpg”时，它不会禁用“下一步”按钮。如果“下一步”按钮被禁用，我也怀疑这个脚本是否会继续检查 img 的 src。例如：如果我前进到最后一张图片，并且“下一个”按钮被禁用（删除了 href），如果我返回几张图片，是否会重新启用“下一个”按钮（重新添加 href）？

您可以就为什么这不起作用以及我应该做些什么来提供任何帮助将不胜感激。提前致谢。

编辑：下一个图像代码，再加上一些。

 <script style="text/javascript">
function nextImage() {
    $("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
    return (parseInt(m, 10)+1) + '.jpg';
}));}
</script>

此外，按钮的代码和 img 标签。previousImage()、lastImage() 等只是对 nextImage() 的修改。干杯。

<img id="image" src=""></img>
        <div class="imageToolbar">
            <a id="first" href="javascript:firstImage()"></a>
            <a id="previous" href="javascript:previousImage()"></a>
            <a id="next" href="javascript:nextImage()"></a>
            <a id="last" href="javascript:lastImage()"></a>
        </div>
4

5 回答 5

1

当页面首次加载时，您的代码将运行一次，并且仅运行一次。每次图像更改时，您都需要运行代码才能使其正常工作。

于 2012-08-02T12:41:00.387 回答
1

假设页面总是加载显示的第一个图像，我稍微调整了您的功能以使用按钮，相应地使用disabled属性：

HTML

<img id="image" src="images/big/1.jpg">
<div class="imageToolbar">
    <button id="first" disabled="disabled">First</button>
    <button id="previous" disabled="disabled">Prev</button>
    <button id="next">Next</button>
    <button id="last">Last</button>
</div>

JS

function changeImage(arg) {
    $("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
        var min = 1, //configure these
            max = 7, //values
            $lower = $('#first, #previous'),
            $higher = $('#next, #last');

        m = parseInt(m, 10);

        if (arg == 'next') {
            m++;
            $lower.prop('disabled', false);
            if (m == max)
                $higher.prop('disabled', true);
        }
        else if (arg == 'previous') {
            m--;
            $higher.prop('disabled', false);
            if (m == min)
                $lower.prop('disabled', true);
        }
        else if (arg == 'first') {
            m = min;
            $higher.prop('disabled', false);
            $lower.prop('disabled', true);
        }
        else if (arg == 'last') {
            m = max;
            $higher.prop('disabled', true);
            $lower.prop('disabled', false);
        }

        return m + '.jpg';
    }));

    //you can remove the next line on the production server:
    console.log('Current image: ' + $('#image').attr('src'));
}


$(document).ready(function () {
    $('#first').click(function(){ changeImage('first'); });
    $('#previous').click(function(){ changeImage('previous'); });
    $('#next').click(function(){ changeImage('next'); });
    $('#last').click(function(){ changeImage('last'); });
});

jsFiddle

但是，如果您正在开发幻灯片插件，为什么要重新发明轮子？您不妨看看现成的好东西，例如jQuery Camera Slideshow。

于 2012-08-02T13:42:38.103 回答
0

使用 javascript-hrefs 被认为是不好的做法。由于您仍然使用 jQuery，因此您可以在按钮中挂钩单击事件，然后nextImage()从 JavaScript 代码调用。像这样的东西：

$("#next").click(function (e) {
    // If this was an a-element, prevent going to that page
    e.preventDefault();

    var src = $("#image").attr("src");
    if  (src != "images/big/7.jpg") {
        nextImage();
    }
});

现在，每次用户单击该#next元素时，此代码都会运行。

于 2012-08-02T12:50:34.483 回答
0

为什么不使用数组作为 src attr 图像的占位符？

通过这种方式，您可以随时跟踪当前正在查看哪个图像，哪个位于最后，等等！我认为这看起来要好得多，而不必将最后一个与特定的字符串名称/图像文件进行比较！

于 2012-08-02T13:01:47.833 回答
0

准备好文档后，将您的代码放入这样的函数中

function imageCheck() {
    var src = ($("#image").attr("src"));
    if  (src == "images/big/7.jpg") {
         $("#next").attr("href","");
    } else {
        $("#next").attr("href", "javascript:nextImage()");
    }
 };

并从 nextImage() 函数中调用此函数。所以每次 nextImage 函数运行时，你的 imageCheck() 函数都会检查 image src 的值并适当地显示 href。

于 2012-08-02T12:52:03.410 回答