1

私はこれを持っています：

function toggleCharts() {
var x, divArray = ["item_4746983", "item_4491867"];
for (x in divArray) {
    if (x) {
        document.getElementById(divArray[x]).style.display = 'block';
    }
}

<button onClick="toggleCharts();">Charts</button>

この：

#item_4746983 {
    display:none;
}

#item_4491867 {
    display:none;
}

item_4746983&item_4491867は、グラフをクリックしたときに表示または非表示にするサムネイルです

コードは機能し、ボタンをクリックすると表示されますが、もう一度クリックして非表示にするコードがわかりません。

4

3 に答える 3

1

ID によるスタイル設定ではなく、クラスによるスタイル設定:

.hiddenThumbnail {
    display:none;
}

hiddenThumbnail次に、2 つのアイテムに対してクラスを適用および削除します。これにより、CSS コードが小さくなり、すべてがより保守しやすくなります。クラスを変更する方法のガイドについては、この優れた回答を参照してください。

または、 YUIなどのライブラリを使用して実行します (jquery にも同様の機能があるはずです)。

于 2013-01-31T02:12:52.400 に答える
0

div が既に表示されているかどうかを確認し、表示を変更します。次のコードは機能するはずです。

var div = document.getElementById(divArray[x])
var shown = div.style.display;

if ("block" == shown) {
    div.style.display = none;
} else {
    div.style.display = block;
}

これは、あなたが望むことを行うためのさまざまな方法を示すリンクです: http://www.dustindiaz.com/seven-togglers/

于 2013-01-31T02:11:53.200 に答える
0

デモを確認してください。

function toggleCharts() { 
    var divArray = ["item_4746983", "item_4491867"], i, ele;
    for (i=0; i < divArray.length; i++) {
        ele = document.getElementById(divArray[i]);
        ele.style.display = ele.style.display === 'block' ? 'none' : 'block';
    }
}
于 2013-01-31T02:12:45.853 に答える