Bootstrap-Override wird nicht wirksam

-1

Ich versuche, eine Bootstrap-Klasse mit JavaScript zu überschreiben. Das Problem ist, dass der Wert der Anzeige durch den Javascript-Code geändert wird, aber die HTML-Zeilen nicht angezeigt werden. Wenn ich in dem Style-Block in custom.css wichtigere Befehle verwende, wird der Bootstrap überschrieben und die JavaScript-Zuweisung wird immer noch die HTML-Zeilen werden nicht angezeigt .... kann mir jemand sagen, was hier falsch ist. Ich habe versucht, eine ID zu verwenden und dann die Elemente (#id.class) zu verketten, die auch nicht funktionierten. (Der Code funktioniert ohne Bootstrap)Bootstrap-Override wird nicht wirksam

benutzerdefinierte CSS

body { 
    margin-top:30px; 
    } 
.hidden 
    { 
    display: none; 
    }

HTML

<!DOCTYPE html> 
<html > 
<head> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/custom.css"> 

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
<script> src="js/bootstrap.min.js"</script> 


</head> 
<body> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-8"> 

     <table class="hidden table table-striped table-border"> 

      <tbody> 
       <tr class="hidden"> 
       <td>List ............</td> 
       </tr> 

       <tr class="hidden active"> 
        <th>A</th> 
        <th>B</th> 
        <th>C</th> 
        <th>D</th> 
       </tr> 
       <tr class="hidden"> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
       </tr> 
       <tr class="hidden"> 
        <td>5</td> 
        <td>6</td> 
        <td>7</td> 
        <td>8</td> 
       </tr> 
       <tr class="hidden"> 
        <td>9</td> 
        <td>10</td> 
        <td>11</td> 
        <td>12</td> 
       </tr> 
       <tr class="hidden"> 
        <td>13</td> 
        <td>14</td> 
        <td>15</td> 
        <td>16</td> 
       </tr> 
       <tr class="hidden"> 
        <td>17</td> 
        <td>18</td> 
        <td>19</td> 
        <td>20</td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 

    </div> 
    <div class="well col-md-8"> 
     <p>Test Messages.........</p> 
    </div> 
    </div> 

</body> 
<script type="text/javascript"> 

    var count=4; 

    var activerows=document.getElementsByClassName("hidden"); 

    if(count <= activerows.length){ 
    for (var i=0; i<count; i++) 
     { 
     activerows[i].style.display="block"; 
     } 
    }else 
    { 
     for (var i=0; i<activerows.length; i++) 
     { 
      // activerows[i].style.display='block'; 
     } 
    } 
</script> 
</html>

Quelle

2016-08-26 MichaelE

, welche Version von Bootstrap Sie verwenden? as * Bootstrap's JavaScript benötigt jQuery Version 1.9.1 oder höher, aber niedriger als Version 3 * – vivekkupadhyay

Also das Problem ist, das ist nicht genug actiiverows [i] .style.display = 'block'; Es ist wahr? –

omg warum du mein Leben schwer machst – Fiido93

Wenn Bootstrap die Hauptschuld nicht seine Klasse dann ist zu verwenden und einfach Ihre benutzerdefinierte Klassehideme oder etwas verwenden und es dann mit Javascript außer Kraft setzen wie ich weiter unten in diesem Snippet getan haben:

var count = 4; 
 

 
var activerows = document.getElementsByClassName("hideme"), 
 
    tablehasClass = document.getElementById("table").classList; 
 

 
if (count <= activerows.length) { 
 
    tablehasClass.remove("hideme"); 
 
    for (var i = 0; i < count; i++) { 
 
    activerows[i].style.display = "table-row"; 
 
    } 
 
} else { 
 
    for (var i = 0; i < activerows.length; i++) { 
 
    // activerows[i].style.display=''; 
 
    } 
 
}

body { 
 
    margin-top: 30px; 
 
} 
 
.hideme { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="css/custom.css"> 
 

 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8"> 
 

 
     <table id="table" class="hideme table table-striped table-border"> 
 

 
      <tbody> 
 
      <tr class="hideme"> 
 
       <td>List ............</td> 
 
      </tr> 
 

 
      <tr class="hideme active"> 
 
       <th>A</th> 
 
       <th>B</th> 
 
       <th>C</th> 
 
       <th>D</th> 
 
      </tr> 
 
      <tr class="hideme"> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>3</td> 
 
       <td>4</td> 
 
      </tr> 
 
      <tr class="hideme"> 
 
       <td>5</td> 
 
       <td>6</td> 
 
       <td>7</td> 
 
       <td>8</td> 
 
      </tr> 
 
      <tr class="hideme"> 
 
       <td>9</td> 
 
       <td>10</td> 
 
       <td>11</td> 
 
       <td>12</td> 
 
      </tr> 
 
      <tr class="hideme"> 
 
       <td>13</td> 
 
       <td>14</td> 
 
       <td>15</td> 
 
       <td>16</td> 
 
      </tr> 
 
      <tr class="hideme"> 
 
       <td>17</td> 
 
       <td>18</td> 
 
       <td>19</td> 
 
       <td>20</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 

 
    </div> 
 
    <div class="well col-md-8"> 
 
     <p>Test Messages.........</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Tisch ist sehr daran interessiert, seine Elemente so nie display: block verwenden uns display: table-row für tr, display: table-cell für td und ähnlich display: table für table

Quelle

2016-08-26 04:22:45 vivekkupadhyay

@vivekkupadhyay .... diese Antwort funktioniert für mich, aber ich bin mir nicht sicher, was der Zweck dieser Zeile ist "tablehasClass.remove (" hideme ");" .... wenn es sich bezieht, wenn count = 0 dann würde dies nicht notwendig, da dieser Code nicht aufgerufen würde .... bitte erläutern Sie diese Codezeile – MichaelE

@MichaelE Ich habe festgelegt, dass die 'table' standardmäßig ausgeblendet wird und immer wenn 'if (count <= activerows.length) {. .. 'Bedingung wird wahr, es wird die' Hidemme'-Klasse entfernen und macht die 'Tabelle' sichtbar. – vivekkupadhyay

interessant! ..... das Entfernen der Linie hält den Tisch nicht wirklich unsichtbar ... einfach nicht richtig geformt. Ich verstehe jetzt, was du versucht hast zu tun. – MichaelE

Anstatt den Stil von javascript Sie die Klasse aus dem Element entfernen sollte. Alternativ können Sie das cssText des Elements Stil auf display:block !important

var count=4; 
 

 
    var activerows=document.getElementsByClassName("hidden"); 
 

 
    if(count <= activerows.length){ 
 
    for (var i=0; i<count; i++) 
 
     { 
 
     activerows[i].style.cssText = 'display:block !important'; 
 
     } 
 
    }else 
 
    { 
 
     for (var i=0; i<activerows.length; i++) 
 
     { 
 
      // activerows[i].style.display='block'; 
 
     } 
 
    }

body { 
 
    margin-top:30px; 
 
    } 
 
.hidden 
 
    { 
 
    display: none; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8"> 
 

 
     <table class="hidden table table-striped table-border"> 
 

 
      <tbody> 
 
       <tr class="hidden"> 
 
       <td>List ............</td> 
 
       </tr> 
 

 
       <tr class="hidden active"> 
 
        <th>A</th> 
 
        <th>B</th> 
 
        <th>C</th> 
 
        <th>D</th> 
 
       </tr> 
 
       <tr class="hidden"> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
       </tr> 
 
       <tr class="hidden"> 
 
        <td>5</td> 
 
        <td>6</td> 
 
        <td>7</td> 
 
        <td>8</td> 
 
       </tr> 
 
       <tr class="hidden"> 
 
        <td>9</td> 
 
        <td>10</td> 
 
        <td>11</td> 
 
        <td>12</td> 
 
       </tr> 
 
       <tr class="hidden"> 
 
        <td>13</td> 
 
        <td>14</td> 
 
        <td>15</td> 
 
        <td>16</td> 
 
       </tr> 
 
       <tr class="hidden"> 
 
        <td>17</td> 
 
        <td>18</td> 
 
        <td>19</td> 
 
        <td>20</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 

 
    </div> 
 
    <div class="well col-md-8"> 
 
     <p>Test Messages.........</p> 
 
    </div> 
 
    </div>

Quelle

2016-08-26 03:42:42 z0mBi3

Ermutigen Sie niemanden zu '' wichtig' ist es eine schreckliche Sache – vivekkupadhyay

Ich bin nicht daran interessiert zu verwenden!wichtig – MichaelE

In diesem Fall wäre die gute Option, entweder eine benutzerdefinierte Klasse anstelle der Bootstrap 'hidden' Klasse zu verwenden, die die Anzeige auf keine ohne'! wichtig' setzt und dann ihre Anzeige mit js umschaltet. Oder Sie können die CSS-Klasse 'hidden' aus dem Element entfernen, um es anzuzeigen. – z0mBi3

Bitte diese Zeile ändern

activerows[i].style.display="block";

mit

$(activerows[i]).attr("style", "display: block !important");

oder

$(activerows[i]).removeClass('hidden');

Sie benötigen! Important wieder die vorherigen außer Kraft zu setzen! Wichtig. https://jsfiddle.net/nqtafyg2/6/

Quelle

2016-08-26 04:00:09

sehr seltsam, es sollte dort etwas Wirkung haben. Ich frage mich, warum – Fiido93

Nie ermutigen Sie jemanden zu verwenden '! wichtig' es ist eine schreckliche Sache – vivekkupadhyay

Verwenden von wichtigen funktioniert ... zumindest bei der Verwendung in custom.css., aber ich versuche, sich davon fern zu bleiben – MichaelE

Bootstrap-Override wird nicht wirksam

Antwort

Verwandte Themen