2016-06-09 7 views
-1

Ich habe einen Abschnitt auf meiner Homepage, der 4 verschiedene Optionen und Änderungen bei der Aktualisierung hat. Sie sind alle in dieser DIV enthalten:Wie kann sichergestellt werden, dass nur ein DIV bleibt, wenn JavaScript deaktiviert ist?

<!-- opt 1 --> 
<div class="featured-post"> 
[IMAGE] [COPY] 
</div> 
<!-- opt 1 ends --> 

<!-- opt 2 --> 
<div class="featured-post"> 
[IMAGE] [COPY] 
</div> 
<!-- opt 2 ends --> 

usw.

Hier JS:

var elems = $("div.featured-post"); 
if (elems.length) { 
var keep = Math.floor(Math.random() * elems.length); 
for (var i = 0; i < elems.length; ++i) { 
if (i !== keep) { 
    $(elems[i]).hide(); 
} 
} 
} 

Das alles funktioniert gut, aber ich habe mich nur gefragt, was ich, um sicherzustellen, hinzufügen müssen, dass Nur die eine Box zeigt an, ob der Benutzer Javascript aktiviert hat.

+2

Sie könnten dies erreichen mit einem no-Skript-Tag, das ich rechne ... https: //developer.mozilla.org/en/docs/Web/HTML/Element/noscript – hally9k

Antwort

1

... Was muss ich hinzufügen, um sicherzustellen, dass nur die eine Box anzeigt, ob der Benutzer Javascript aktiviert hat?

ausblenden alle, aber einer von ihnen in der HTML über style="display: none":

<!-- opt 1 --> 
<div class="featured-post" style="display: none"> 
[IMAGE] [COPY] 
</div> 
<!-- opt 1 ends --> 

<!-- opt 2 --> 
<div class="featured-post" style="display: none"> 
[IMAGE] [COPY] 
</div> 
<!-- opt 2 ends --> 

<!-- opt 3 --> 
<div class="featured-post"> 
[IMAGE] [COPY] 
</div> 
<!-- opt 3 ends --> 

Dann in der JavaScript, um sicherzustellen, dass Sie die eine zeigen du mit dem zufälligen Index und Ausblenden des anderen ausgewählt hast :

var elems = $("div.featured-post"); 
if (elems.length) { 
    var keep = Math.floor(Math.random() * elems.length); 
    elems.each(function(index) { 
     $(this).toggle(index == keep); 
    }); 
} 

Randbemerkung: Sie brauchen nicht die elems.length überprüfen. Wenn es keine passenden Elemente sind, weil jQuery Set-basierte Natur und weil Sie nicht elems.length für alles, was mit dem 0 ein Problem ist, nichts Schlimmes passieren wird:

var elems = $("div.featured-post"); 
var keep = Math.floor(Math.random() * elems.length); 
elems.each(function(index) { 
    $(this).toggle(index == keep); 
}); 
0

ein möglicher Ansatz wäre sei das Folgende.

CSS:

.featured-post{ 
    display:block; 
} 
.no-js .featured-post{ 
    display:none; 
} 
.no-js .featured-post:first-child{ 
    display:block; 
} 

Im CSS erstellen Sie eine "Regel", die das Styling übernimmt, wenn die nicht-js Klasse auf den dom angewandt wird.

HTML:

<body class="no-js"> 
    <!-- opt 1 --> 
     <div class="featured-post"> 
     [IMAGE] [COPY] 
     </div> 
    <!-- opt 1 ends --> 

    <!-- opt 2 --> 
    <div class="featured-post"> 
     [IMAGE] [COPY] 
    </div> 
    <!-- opt 2 ends --> 
</body> 

Im HTML Sie

JS no-js Klasse standardmäßig haben die Verpackungselement definieren sollte:

document.querySelector('body').attr("class", ""); 

Im JS entfernen Sie einfach die no-js-Klasse aus dem Umbruchelement. Wenn der Benutzer JavaScript deaktiviert hat, wird die Klasse NICHT entfernt, was zur Folge hat, dass die no-js css Klassenregel angewendet wird und die gewünschte Ausgabe ergibt

Verwandte Themen