当 img src 等于 jQuery 的特定值时禁用 href答案

【问题标题】：Disable a href when an img src is equal to a specific value with jQuery当 img src 等于 jQuery 的特定值时禁用 href
【发布时间】：2012-07-31 10:24:04
【问题描述】：

我有一个 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>

【问题讨论】：

老兄，你能把nextImage函数的代码也贴出来吗？（大概我从你的最后一个问题中知道它是什么，但最好有一个可编译的例子来测试）
+1 代表整个例子，这里是fiddle。此外，禁用链接相对困难，您可以更改 CSS 以使其看起来不同，并且当用户单击它时什么也不做，但它仍然是可点击的。使用按钮不是更容易吗？
是的，我只是希望它在用户点击它时什么都不做。我认为将href设置为“”会这样做吗？我从来没有想过要让它们成为按钮:)。如果我将锚标签更改为按钮，我应该如何修改我的代码？

标签： javascript jquery html

【解决方案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。

【讨论】：

太棒了，非常感谢！ :) 我决定重新发明轮子，而不是使用 Camera 或 lytebox 之类的东西的原因是因为我需要更多的可定制性。我正在构建的网站是围绕弹出窗口构建的，并且弹出窗口包含的不仅仅是图像。相对而言，幻灯片只是拼图中的一小部分。：）非常感谢你们的帮助！ :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用 javascript-hrefs 被认为是不好的做法。由于无论如何您都使用 jQuery，您可以在按钮中挂接到 click-event，然后从 JavaScript 代码中调用 nextImage()。像这样的：

$("#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 元素时，这段代码都会运行。

【讨论】：

将参数命名为 event 通常不是一个好主意，因为这会影响全局 window.event，这就是为什么在大多数 jQuery 处理函数中只看到 e。
我知道为什么我从未将其命名为 event。早就忘记了。立即修复代码。

【解决方案4】：

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

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。

【讨论】：

【解决方案5】：

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

【讨论】：