2 
function CheckavailOnload()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for(var i = 0; i < elems.length; i++){
  if(elems.style.visibility == 'visible')
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'visible';
    }
  }
  else
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'hidden';
    }
  }
 }
}
CheckavailOnload();

ここで、div「box-collat​​eral box-related」の可視性を確認しようとしていますが、表示されている場合は、クラス名「availability in-stock」の別の段落の可視性を切り替えたいと考えています。

4

3 に答える 3

8

getElementsByClassName()メンバーが 1 つしかない場合でも、常に nodeList オブジェクトを提供します。NodeList オブジェクトにはプロパティがないため、コードでさらに行ったのと同じように、最初styleに反復して可視性を確認する必要があります。elemsif

メンバーが 1 つしかないことが確実な場合は、 を使用してその可視性を確認できますelems[0].style.visibility。

特定の要素の可視性を確認したい場合は、 を指定して、idを使用してその要素を取得できますdocument.getElementById()。

編集

フィドルをありがとう、今、いくつかの結果を得ることができます。

そのため、明示的に割り当てられていない場合、idを取得しようとすると実際の問題が発生します。styleこれに取り組むには、次を使用する必要がありますgetComputedStyle()。

function CheckavailOnload() {
var elems = document.getElementsByClassName('box-collateral box-related');
    for (var i = 0; i < elems.length; i++) {
        if (getComputedStyle(elems[i]).visibility == 'visible' || getComputedStyle(elems[i]).display == 'block') {
            alert("hello");
            var av = document.getElementsByClassName('availability in-stock');
            for (var j = 0; j < av.length; j++) {
                av[j].style.visibility = 'visible';
            }
        }
        else if (getComputedStyle(elems[i]).visibility == 'hidden' || getComputedStyle(elems[i]).display == 'none') {
            var av = document.getElementsByClassName('availability in-stock');
            for (var k = 0; k < av.length; k++) {
                av[k].style.visibility = 'hidden';
            }
        }
    }
}
window.onload = CheckavailOnload;

このコードは、クラスに割り当てられたすべての要素をチェックしますbox-collateral box-related。jsFiddleで動作するデモ。

の使用にも注意window.onloadしてください。これにより、要素が解析される前に要素を取得しようとしていないことが確認されます。とに異なる数の要素がある場合、正しく動作するはずの in と-ループに切り替えelemsました。avfor...jfor...kelemsav

メンテナンスされたクラスを持つ最初に見つかった要素がチェック対象の要素である場合は、すべての式iで単純に置き換えることができます。0elems[i]

特定の要素だけをチェックしたい場合は、 を指定してid、 で参照を取得できますgetElementById()。HTML の場合:

<div id="checkThisOnly" class="box-collateral box-related">

そして、スクリプトで：

var elem = document.getElementById('checkThisOnly');
if (getComputedStyle(elem).visibility...) {
    ......
}
于 2012-12-18T17:49:27.090 に答える
1

「elems」は要素のセットですが、その「スタイル」プロパティを見ようとしています。要素をループして、それぞれのプロパティをチェックするように、物事を再配置する必要があります。

また、後で av をループします - スキャンのために elems.length を見ています。これは少し混乱していると思います。

于 2012-12-18T17:49:07.663 に答える
0

したがって、コメントで述べたように、「hidden」という言葉の周りに引用符がないようです。コピペエラーだと思います。

これは、目標を達成するための 1 つの方法を示すコードの簡素化されたバージョンです。

function Checkavailability()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for (var i=0; i<elems.length; i++) {
    if(elems[i].style.visibility == 'visible'){
      // do some stuff
    }
    else{
       // do some stuff
    }
  }
}

ここでの主な違いは、返されるすべての要素を繰り返し処理していることgetElementsByClassNameです。関数名の複数形に注意してください -

get <strong>Elements ByClassName - 指定されたすべてのクラス名を持つ要素のセットを返します。

于 2012-12-18T17:56:02.917 に答える