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/

1
mijok 20 listopad 2019, 11:52
1
Użyj $("html").attr('data-highcontrast-applied') lub $("html").data('highcontrast-applied') Więc Twoje końcowe oświadczenie if będzie if($("html").data('highcontrast-applied'))
 – 
Carsten Løvbo Andersen
20 listopad 2019, 11:53

7 odpowiedzi

Problemy z Twoim kodem to:

  1. Nie otrzymujesz poprawnie wartości atrybutu html;

  2. typeof w $("html").attr('data-highcontrast-applied') zwróci boolean, 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

1
Ivanka Todorova 20 listopad 2019, 12:03

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"});
    }   
});
0
ziga1337 20 listopad 2019, 11:57

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

0
Tobias Fuchs 20 listopad 2019, 11:58

Powinieneś użyć

if($("html").attr('data-highcontrast-applied')){}

Lub

if($("html").data('highcontrast-applied')){}
0
Shuaib Khan 20 listopad 2019, 11:58

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"});
    }

});
1
Marwen Jaffel 20 listopad 2019, 12:04

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/

0
MANITORATION 20 listopad 2019, 12:05

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>
0
Foram Trada 20 listopad 2019, 16:17