2016-01-28 26 views
5

Tôi chỉ đang chơi với một số Jquery cơ bản và một điều gì đó kỳ lạ đang xảy ra. Tôi có hai phần tử trên trang .. một tiêu đề h1 và một liên kết chung. Khi tôi nhấp vào liên kết, tôi muốn văn bản thay đổi thành "Văn bản này giờ đây đã thay đổi", và sau đó, hoặc nút biến mất và h1 mới được tạo với cùng văn bản "văn bản này không thay đổi" hoặc nút chính nó biến thành h1. Tôi không chắc chắn, nhưng đây là mã của tôi:Tất cả các yếu tố thay đổi khi nhấp vào, không chỉ các yếu tố được nhắm mục tiêu

HTML:

<html> 
    <head> 
     <title></title> 

     <link rel="stylesheet" type="text/css" href="css/main.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="js/main.js"></script> 
    </head> 

    <body> 

     <h1>This element should change.<h1> 


     <a href="#" class="myLink">Click Me</a><br> 


    </body> 
</html> 

jQuery:

$(document).ready(function() { 

    $(".myLink").click(function() { // this is a convenience method that targets the same elements above just in a quicker fashion. 
      $("h1").html("This text has now changed."); 
    }); 

}); 

Hình Trước khi nhấp chuột:

enter image description here

Hình Sau:

enter image description here

Ngoài ra, khi tôi thêm phương pháp mờ dần, mọi thứ biến mất một lần nữa, không chỉ yếu tố "h1" được nhắm mục tiêu.

Bất kỳ lời khuyên nào được đánh giá cao như mọi khi. Cảm ơn bạn.

Trả lời

7

Bạn có hai mở <h1> thẻ (thứ hai thiếu /.)

<h1>This element should change.<h1> 
           ^here 
+2

Wow Tôi là một thằng ngốc, cảm ơn bạn rất nhiều. –

+2

xảy ra với chúng tôi. – Aziz

5

Dường như bạn có hai thẻ bắt đầu. EG:

<h1>Heading 1<h1> 

Thử thay thẻ thứ hai thành thẻ kết thúc. EG:

<h1>Heading 1</h1> 
      ^
4

Thẻ h1 của bạn không bị đóng. Bạn có 2 thẻ mở, và theo mặc định, liên kết của bạn được chứa bởi các thẻ mở thứ hai vì vậy nó thay đổi html rằng

Các vấn đề liên quan