0

切り替えようとしている画像ボタンがあります。ただし、更新時に一度だけトグルします。画像をクリックすると 2 番目の画像に変わり、次にクリックすると元の画像に戻ります。このコードを使用すると、最初の画像から 2 番目の画像に移動できますが、もう一度クリックしても元の画像に戻ることはできません。誰かが私が間違っているところを指摘できますか? これは私が使用しているスクリプト全体です

HTML & jQuery -

<a href='#'>
        <input type="image" src="/images/pulpit.jpg" id="btn-true" />
</a>


<script type="text/javascript">
            $('#btn-true').click( function () {
                if ($(this).prop("src", "/images/pulpit.jpg"))
                    $(this).prop("src", "smiley.gif");
                else if ($(this).prop("src", "smiley.gif"))
                    $(this).prop("src", "/images/pulpit.jpg");
            });
        </script>
4

3 に答える 3

2

条件ステートメントが少し間違っています。実際にチェックでソースを割り当てているので、次の行を変更します。

if ($(this).prop("src", "/images/pulpit.jpg"))
else if ($(this).prop("src", "smiley.gif"))

に：

if ($(this).prop("src") == "/images/pulpit.jpg")
else if ($(this).prop("src") == "smiley.gif")
于 2013-07-09T12:53:38.417 に答える
0

画像の URL を確認して変更する代わりに、CSS クラスを処理する必要があります。たとえば、画像をクリックすると、この画像がトグルされているかどうかを確認します。

if ($(this).hasClass("toggle"))
    $(this).removeClass("toggle");
else
    $(this).addClass("toggle");

次に、CSS で画像パスを指定します。

img { background-image:url(/images/pulpit.jpg); }
img.toggle { background-image:url(smiley.gif); }

編集：

JavaScript 関数の内容を次のように置き換えます。

$(this).toggleClass('toggle');

結果はまったく同じになりますが、@Eric で言及されているように、toggleClass()メソッドを使用する方がはるかに優れています。

画像をクリックするたびに、「トグル」CSS クラスがまだ追加されていない場合は追加され、追加されていない場合は削除されます。

次に、これを CSS で管理できます (この場合、別の画像を表示するために上記の 2 つの css クラスを追加します)。

于 2013-07-09T13:02:18.730 に答える
0

まず、属性とプロパティに使用.attr()します。次に、現在試みているように設定するのではなく、出力を比較する必要があります。これを見てください：.prop()

$('#btn-true').click( function () {
                if ($(this).attr("src") == "/images/pulpit.jpg") {
                    $(this).attr("src", "smiley.gif");
                } else if ($(this).attr("src") == "smiley.gif") {
                    $(this).attr("src", "/images/pulpit.jpg");
                }
            });
于 2013-07-09T12:55:04.687 に答える