Quiero animar la opacidad de todos los demás divs, espero uno, así que he usado css: not property, pero parece que no funciona. Porque en lugar de hacer lo que quiero, cambió la opacidad de todos los elementos div, incluido el div que no quiero que se cambie... Este es mi código:
function urlHighlight() { const queryString = window.location.search const urlParams = new URLSearchParams(queryString) const product = urlParams.get('h') //To check whether Url param and Div with data Id of given Url param exists if (product && $(`div[data-id=${product}]`).length == 1){ $('html, body').animate({ scrollTop: $(`div[data-id=${product}]`).offset().top - 100 }, 2000); //I want to change opacity of the div elements which don't have the Url param as value of data-id $(`body:not(div[data-id=${product}])`).animate({ opacity: 0.5 }, 5000, function(){$(this).removeAttr("style")}) } } $(function(){ $.getJSON("data.json", function(data) { //some functions urlHighlight() }) })¿Cuál es el problema y cómo debo solucionarlo?
El selector debe ser body *:not(div[data-id=${product}]) así. todas las etiquetas dentro del cuerpo que no son la condición establecida.
function urlHighlight() { const queryString = window.location.search const urlParams = new URLSearchParams(queryString) const product = 'test' || urlParams.get('h') //defaulting to test //To check whether Url param and Div with data Id of given Url param exists if (product && $(`div[data-id=${product}]`).length == 1){ console.log('in'); $('html, body').animate({ scrollTop: $(`div[data-id=${product}]`).offset().top - 100 }, 2000); //I want to change opacity of the div elements which don't have the Url param as value of data-id console.log($(`body *:not(div[data-id=${product}])`)); $(`body *:not(div[data-id=${product}])`).animate({ opacity: 0.5 }, 5000, function(){$(this).removeAttr("style")}) } } $(function(){ // $.getJSON("data.json", function(data) { //some functions setTimeout(() => { urlHighlight() }, 1000); // }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div data-id="test" style="height:100px;width:100px">test</div> <div data-id="testy" style="height:100px;width:100px">test2</div> </body>