entonces, he estado tratando de hacer una función jQuery que cambiaría el estilo de fuente de un párrafo una vez que se hace clic en él.
Aquí está el código que he probado:
$(document).ready(function() { $("#story-p").click(function() { $(this).css({ "font-family": "Arial, Helvetica, sans-serif", "font-size": "200%", }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <img class="background" src="restaurant.jpg" style="display: none" /> <h1 class="heading">Fuego</h1> <div class="container"> <h1 class="story">Our Story</h1> <p class="story-p"> Test </p> </body>No puedo entender por qué no funcionaría?
¿Me estoy perdiendo de algo?
Muchas gracias
No funciona porque su selector para adjuntar el evento de clic usa $('#story-p') lo que significa que está apuntando a un elemento con id=story-p pero su párrafo no tiene una identificación en su lugar tiene la clase como story-p .
Así que cambie su selector como se muestra a continuación y comenzará a funcionar.
$(document).ready(function() { $(".story-p").click(function() { $(this).css({ "font-family": "Arial, Helvetica, sans-serif", "font-size": "200%", }); }); }); <body> <img class="background" src="restaurant.jpg" style="display: none" /> <h1 class="heading">Fuego</h1> <div class="container"> <h1 class="story">Our Story</h1> <p class="story-p"> We are an Asian inspired streetfood restaurant located in the Cape Town CBD. We pool together recipes from Vietnam, Thailand and Japan and create an authentic Asian food experience here in South Africa. Our owners, have spent years working in restaurants all over Asia and have collaborated to create a collection of their favourite and most popular dishes. We have been open now for 2 years and plan to continue this journey well into the future. Come and visit us! </p> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>// en primer lugar, con javascript moderno realmente no necesita usar jquery. Y usó el selector incorrecto para su elemento de párrafo.
<script> $(document).ready(function(){ $(".story-p").click(function(){ $(this).css("font-family", "Arial, Helvetica, sans-serif");}); }); </script>