所以,我一直在嘗試制作一個 jQuery 函式,一旦點擊它就會改變段落的字體樣式。
這是我嘗試過的代碼:
$(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>
我不明白為什么它不起作用?
我錯過了什么嗎?
非常感謝
uj5u.com熱心網友回復:
它不起作用,因為您選擇附加單擊事件使用$('#story-p'),這意味著它的目標是一個元素,id=story-p但您的段落沒有 id 而是它的類為story-p.
因此,如下所示更改您的選擇器,它將開始作業。
$(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>
uj5u.com熱心網友回復:
// 首先,對于現代 javascript,您實際上并不需要使用 jquery。而且您為段落 elemnet 使用了錯誤的選擇器。
<script>
$(document).ready(function(){
$(".story-p").click(function(){
$(this).css("font-family", "Arial, Helvetica, sans-serif");});
});
</script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/443845.html
標籤:javascript html
上一篇:使用HTML輸入欄位中的值時Javascript中斷
下一篇:計算一種格式的字符數
