当img src等于jQuery的特定值时，禁用href [英] Disable a href when an img src is equal to a specific value with jQuery

问题描述

我有一个img标签(标识为"image"). img的src使用jQuery分配(每个图像都有单独的按钮，无法显示).有一个按钮可前进到下一张照片(将其视为幻灯片播放). 下一步"按钮只是一个带有另一个jQuery函数的href的锚标记.

I have an img tag (id "image"). The src of the img is assigned using jQuery, (there are separate buttons for each image than can be displayed). There is a button to advance to the next picture (think of it as a slideshow). The 'next' button is just an anchor tag with a href to another jQuery function.

当最后一张图片是占据img标签src的那张图片时，我想删除定位标签的href("next"按钮).如果不是最终图片是img标签的src，我希望将"next"按钮设为"active"(对其他jQuery Function进行href设置).

When the final picture is the one occupying the src of the img tag, I would like to remove the href of the anchor tag (the 'next' button). If it is not the final picture that is the src of the img tag, I want the 'next' button to by 'active' (have the href to the other jQuery Function).

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

When the page loads, the img tag doesn't have a src.

我写了以下代码，认为它可以工作:

I wrote the following code, thinking it would work:

<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的源代码为"images/big/7.jpg"时，它不会禁用下一个"按钮.对于是否禁用了下一个"按钮，该脚本是否会继续检查img的src，我也持怀疑态度.例如:如果我前进到最后一张图像，并且下一个"按钮被禁用(删除了href)，如果我返回了几张图片，是否会重新启用下一个"按钮(重新添加href)?

Sadly it doesn't. It does not disable the 'next' button when the img has a src of "images/big/7.jpg". I am also sceptical as to whether this script would continue to check the src of the img if the 'next' button had been disabled. For example: if I advanced to the last image, and the 'next' button got disabled (href removed), if I went back a couple of pictures, would the 'next' button be re-enabled (href re-added)?

任何帮助您可以弄清为什么它不起作用以及我应该做些什么将不胜感激.提前致谢.

Any help you can give as to why this isn't working and what I should do to make it would would be much appreciated. Thanks in advance.

下一个图像代码，以及其他一些代码.

The next image code, plus some more.

 <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()的修改.干杯.

Also, the code for the buttons, and the img tag. The previousImage(), lastImage(), etc. are just modifications of nextImage(). Cheers.

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

推荐答案

假定页面始终加载有显示的第一张图像，我使用

Assuming the page is always loaded with the first image displaying, I adapted your function slightly to work with buttons, using the disabled property accordingly:

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 .

这篇关于当img src等于jQuery的特定值时，禁用href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！