1

imgタグ（id "image"）があります。imgのsrcは、jQueryを使用して割り当てられます（画像ごとに表示できるボタンがあります）。次の画像に進むためのボタンがあります（スライドショーと考えてください）。「次へ」ボタンは、別のjQuery関数へのhrefを含む単なるアンカータグです。

最終的な画像がimgタグのsrcを占めるものである場合、アンカータグ（「次へ」ボタン）のhrefを削除したいと思います。imgタグのsrcであるのが最終的な画像でない場合は、「次へ」ボタンを「アクティブ」にします（他の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に「images/big / 7.jpg」のsrcがある場合、「次へ」ボタンは無効になりません。また、「次へ」ボタンが無効になっている場合に、このスクリプトがimgのsrcをチェックし続けるかどうかについても懐疑的です。例：最後の画像に進み、「次へ」ボタンが無効になった場合（hrefが削除された場合）、2枚の画像に戻った場合、「次へ」ボタンが再度有効になりますか（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

コードは、ページが最初に読み込まれたときに1回だけ実行されます。画像を機能させるには、画像が変更されるたびにコードを実行する必要があります。

于 2012-08-02T12:41:00.387 に答える
1

ページには常に最初の画像が表示されていると仮定して、無効なプロパティを適宜使用して、ボタンを操作するように関数を少し調整しました。

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

しかし、スライドショープラグインに取り組んでいるのなら、なぜ車輪の再発明をするのでしょうか。jQueryCameraSlideshowなどのすぐに使えるグッズもご覧ください。

于 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

ドキュメントの準備ができたら、コードを次のような関数に入れます

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 に答える
0

src属性への画像のプレースホルダーとして配列を使用しないのはなぜですか？

このようにして、現在表示されている画像、最後に配置された画像などを常に追跡できます。これは、最後のものを特定の文字列名/画像ファイルと比較するよりもはるかに良く見えると思います！

于 2012-08-02T13:01:47.833 に答える