0

私は js の初心者で、このコードをきれいにするために助けが必要です。これは、実際のフォームのチェック ボックスではなく画像を使用してチェック ボックスを表示している changeImage の状況です。したがって、ユーザーが空のチェック ボックスをクリックすると、クリックすると画像がチェック マークに変わります。そして、もう一度クリックしてチェックを外すことができます。それはすべて機能しますが、これが問題です。

チェック ボックス イメージの 1 つをクリックした後、別のチェック ボックス イメージを変更するには、2 回クリックする必要があります。スムーズなワンクリックの状況にしたいのですが、何がそれを妨げているのかわかりません。ここに私が使用しているコードのスニペットがあります -

var newsrc = "img/checked.gif";

function changeImage() {
    if(newsrc == "img/checked.gif") {
        document.images["challenge"].src = "img/checked.gif";
        document.images["challenge"].alt = "Completed";
        newsrc = "img/checkBox.gif";
    } else {
        document.images["challenge"].src = "img/checkBox.gif";
        document.images["challenge"].alt = "Unfinished";
        newsrc = "img/checked.gif";
    }
}

function changeImage2() {
    if(newsrc == "img/checked.gif") {
        document.images["goal1"].src = "img/checked.gif";
        document.images["goal1"].alt = "Completed";
        newsrc = "img/checkBox.gif";
    } else {
        document.images["goal1"].src = "img/checkBox.gif";
        document.images["goal1"].alt = "Unfinished";
        newsrc = "img/checked.gif";
    }
}

スクリプトには全部で 6 つの画像があります。最初の2つだけを表示しています。あなたが与えることができるどんな助けも素晴らしいでしょう.

4

1 に答える 1

0

何が起こっているかというと、すべての関数が同じnewsrc変数を共有しており、1 つをクリックすると、他の関数も同じようにクリックされたと見なされます。

src を切り替える単一の関数を作成し、アイテムがクリックされたときにその関数を呼び出す方がよい場合があります。

何かのようなもの：

function toggleImage(clickedImage){
    var checkedSrc='img/checked.gif';
    var currentSrc=clickedImage.src;
    if(currentSrc.indexOf(checkedSrc) ==  currentSrc.length-checkedSrc.length){
        clickedImage.src='img/checkBox.gif';
        clickedImage.alt='Unfinished';
    }else{
        clickedImage.src='img/checked.gif';
        clickedImage.alt='Complete';
    }
}

そしてあなたのhtmlで

<img id="whatever_1" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />
<img id="whatever_2" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />
<img id="whatever_3" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />
于 2013-03-28T03:32:04.957 に答える