javascript - 当 img src 等于 jQuery 的特定值时禁用 href

Question

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

当最终图片是占用 img 标签 src 的图片时，我想删除 anchor 标签(“下一步”按钮)的 href。如果 img 标签的 src 不是最终图片，我希望“下一步”按钮处于“事件”状态(将 href 指向其他 jQuery 函数)。

当页面加载时，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>

Answer 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 .