Mam problem z kodem. Próbuję dodać kolor tła do div, jeśli atrybut danych jest prawdziwy. To jest mój kod HTML:
<html data-highcontrast-applied="true">
<head>
</head>
<body>
<div class="row-centered">
<p>
Helllllllooooooooooo
</p>
</div>
</body>
</html>
To jest kod jQuery
$(document ).ready(function() {
if(typeof $("html").attr('highcontrast-applied') == 'true')
{
$(".row-centered").css({"background-color": "red"});
}
});
Czy ktoś może mi w tym pomóc? Jest to również link do jsfiddle: https://jsfiddle.net/dmv9o3ep/2/
7 odpowiedzi
Problemy z Twoim kodem to:
Nie otrzymujesz poprawnie wartości atrybutu html;
typeofw$("html").attr('data-highcontrast-applied')zwróciboolean, a nie wartość atrybutu html;
Ustawiłbym atrybut data-* na 1 lub 0, a następnie użyj parseInt i sprawdź, czy jest równy 1 i zastosuj tło (lub inne właściwości CSS chcesz):
$(document).ready(function() {
if (parseInt($("html").attr('data-highcontrast-applied')) === 1) {
$(".row-centered").css({
"background-color": "red"
});
}
});
https://jsfiddle.net/eht9faoz/
Możesz przeczytać więcej o jQuery .data() i .attr(): https://stackoverflow.com/a/7262427/867418
Błędnie wpisałeś nazwę atrybutu, spróbuj tego:
$(document).ready(function() {
if(typeof $("html").attr("data-highcontrast-applied"))
{
$(".row-centered").css({"background-color": "red"});
}
});
Nie musisz tam używać typeof
$(function() {
if($("html").data('highcontrast-applied') == true) {
$(".row-centered").css({"background-color": "red"});
}
});
To działa w ten sposób
Powinieneś użyć
if($("html").attr('data-highcontrast-applied')){}
Lub
if($("html").data('highcontrast-applied')){}
Spróbuj usunąć typeof i pobierz wartość tego atrybutu, np. string, a następnie porównaj go z wartością „true”
$(document ).ready(function() {
if($("html").attr('data-highcontrast-applied').toString() == 'true')
{
$(".row-centered").css({"background-color": "red"});
}
});
Aby to osiągnąć, możesz użyć natywnego javascript
$(document ).ready(function() {
var temp = document.getElementsByTagName("html")[0].getAttribute("data-highcontrast-applied");
console.log("temp==", temp);
if(temp === 'true')
{
$(".row-centered").css({"background-color": "red"});
}
});
https://jsfiddle.net/tyfg6ezv/
Możesz spróbować z .addClass (). Działa.
$(document ).ready(function() {
var temp = document.getElementsByTagName("html")[0].getAttribute("data-highcontrast-applied");
if(temp === 'true')
{
$(".row-centered").addClass("intro");
}
});.intro{
background-color : red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html data-highcontrast-applied="true">
<head>
</head>
<body>
<div class="row-centered">
<p>
Helllllllooooooooooo
</p>
</div>
</body>
</html>
$("html").attr('data-highcontrast-applied')lub$("html").data('highcontrast-applied')Więc Twoje końcowe oświadczenieifbędzieif($("html").data('highcontrast-applied'))