使用jQuery禁用img src等于特定值时的href

Disable a href when an img src is equal to a specific value with jQuery

本文关键字：href 于特定 jQuery 禁用 img src 使用      更新时间：2023-09-26

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

当最后一张图片占据img标签的src时，我想删除锚标签的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>

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

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

但是，如果你正在开发Slideshow插件，为什么要重新发明轮子呢？你也可以看看现成的好东西，比如jQuery相机幻灯片。

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

在文档就绪时，将代码放入类似的函数中

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。

使用javascript hrefs被认为是不好的做法。由于您无论如何都使用jQuery，所以您可以挂接到按钮中的单击事件，然后从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元素时，都会运行此代码。

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

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

相关文章：