1

setAttributeを使用して「hidden」および「visible」と呼ばれるスタイルクラスを適用することにより、ページ上のさまざまなdivを表示および非表示にする関数をいくつか作成しています。この関数は、一度に複数のdivを非表示にすることを目的としています。クラス「hidden」が与えられる各divのIDが配列にリストされます。

各divには複数のクラスが含まれる場合があるため、divに「非表示」クラスが与えられた場合、「可視」クラスが置き換えられることを除いて、他のクラスを保持する必要があります。

function hideSections() {
  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = div.getAttribute("class");

    // Remove "visible" class if it exists
    divClass = divClass.replace("visible", "");

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }
}

確かに呼び出されていますが、何らかの理由でこの関数は機能していません。

行[[vardivClass= div.getAttribute（ "class"）;]]の前に配置すると、ループ内に配置されたalert（）が表示されます。この行の後に配置されているので、そうではないので、この行が問題のある場所だと思います。

すべてのdivにはクラス属性が指定されています。

4

3 に答える 3

0

次のようなものを試してください。

    function hideSections() {
    // Initialise array with div IDs
    var divs = ["tab-1", "tab-2", "tab-3", "tab-4", "tab-5"];

    // Loop through divs in array
    for (var count = 0; count < divs.length; count++) {

        // Get existing classes
        var div = document.getElementById(divs[count]);
        var divClass = div.getAttribute("class");

        // Remove "visible" class if it exists
        var regex = new RegExp( '(?:^|\\s+)' + 'visible' + '(?=\\s|$)', 'i' );
        if ( regex.test( divClass ) ) {
            divClass = divClass.replace( regex, '' ).replace( /^\s+/, '' );

            // Append "hidden" class
            if ( divClass )
                div.setAttribute( 'class', divClass + ' hidden' );
            else
                div.setAttribute( 'class', 'hidden' );
        }

    }
}

また、 jsfiddleからこれを試すことができます

于 2011-09-02T21:03:17.340 に答える
0

私の推測では、クラス属性を持たない要素があるためdivClass、null であり、オンラインでエラーが発生しますdivClass = divClass.replace("visible", "");。(null 値からメソッドを呼び出すことはできません)

属性を確認してみてください：

  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = '';
    if(divClass = div.getAttribute("class")) {
        // Remove "visible" class if it exists
        divClass = divClass.replace("visible", "");
    }

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }

... または、私が作成した JSFiddle デモをご覧ください。

于 2011-09-02T00:33:54.353 に答える
0

必要なのは、クラスを追加および削除するためのユーティリティ関数です。ここに私が使用するものがあります：

var trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

var hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

var addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!hasClassName(el, cName)) {
        el.className = trim(el.className + ' ' + cName);
    }
}

var removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}

これで、次のことができます。

addClass(elementOrId, 'classValue');

「名前空間」または適切なものでラップします。

于 2011-09-02T02:46:34.470 に答える