Chuyển đổi innerHTML

Question

Tôi đã nhìn thấy các ví dụ khác nhau gần với những gì tôi đang tìm kiếm, nhưng không có ví dụ nào trong số đó dường như mô tả cách tôi chính xác muốn nó. Tôi là người mới bắt đầu với jQuery, vì vậy giải thích được chào đón.

Tôi đang tìm kiếm điều này để chuyển đổi innerHTML từ - thành +. Có ai biết cách làm điều này, hiệu quả không?

jQuery/Javascript

$(document).ready(function() { 
      $(".A1").click(function() { 
       $(".P1").toggle("slow"); 
       $(".A1").html("+"); 
      }); 
     }); 

HTML

<div class="A1">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

Cảm ơn bạn, bất cứ điều gì liên quan đến chuyển đổi các văn bản bên trong của một phần tử HTML có trách nhiệm giúp đỡ. =)

Answer 1

Cách thêm lớp học sẽ cho bạn biết trạng thái mở rộng/thu gọn?

Html

<div class="A1 expanded">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

JavaScript:

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $this = $(this); 
     $(".P1").toggle("slow") 

     $this.toggleClass("expanded"); 

     if ($this.hasClass("expanded")) { 
      $this.html("-"); 
     } else { 
      $this.html("+"); 
     } 
    }); 
}); 

Ví dụ:http://jsfiddle.net/sGxx4/

Answer 2

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(".P1").toggle("slow"); 
     $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+"))); 
    }); 
}); 

Một chút giải thích: Tôi đang thiết $("#A1").html() với sản phẩm của các nhà điều hành đại học, sử dụng nó để kiểm tra giá trị hiện tại của văn bản #A1 's. Nếu đó là +, tôi đặt văn bản của phần tử thành -, nếu không, tôi đặt văn bản thành +.

Tuy nhiên, bạn đã nói "hiệu quả". Để kết thúc này, điều quan trọng cần lưu ý là nếu bạn định sử dụng một bộ chọn hai lần hoặc nhiều hơn trong cùng một hàm, bạn nên lưu trữ đối tượng jQuery mà kết quả từ bộ chọn mà bạn đưa ra trong một biến, do đó bạn không phải chạy lại bộ chọn mỗi lần. Đây là mã có sửa đổi đó:

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $A1 = $(".A1"); 
     $(".P1").toggle("slow"); 
     $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+"))); 
    }); 
}); 

Answer 3

Không có cách nào để chuyển đổi nội dung. Bạn có thể kiểm tra xem $ ('. P1') có hiển thị hay không, sau đó thay đổi dấu +/- div theo đó.

Cái gì như:

$(document).ready(function() { 
    $(".A1").click(function() { 
    $(".P1").toggle("slow", function(){ 
     if($(this).is(':visible')) 
      $(".A1").html("-") 
     else 
      $(".A1").html("+") 
    }); 
    }); 
}); 

Sử dụng một hàm callback (đối số thứ hai của phương pháp .toggle()) để thực hiện việc kiểm tra sẽ đảm bảo rằng bạn đang kiểm tra sau khi các hình ảnh động hoàn tất.

JsFiddle: http://jsfiddle.net/cy8uX/

Answer 4

hơn phiên bản ngắn hơn

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $self = $(this); 
     $(".P1").toggle("slow", function () { 
      $self.html($self.html() == "-" ? "+" : "-"); 
     }); 
    }) 
}); 

Answer 5

Đây là một cách sử dụng tên lớp trên một phụ huynh và CSS quy tắc và không nhất thiết phải thay đổi nội dung HTML và xử lý hết một container và lớp học, do đó bạn có thể có nhiều người trong số này trong cùng một trang với chỉ này một đoạn mã:

HTML:

<div class="container expanded"> 
    <div class="A1"> 
     <span class="minus">-</span> 
     <span class="plus">+</span> 
    </div> 
    <h2 class="H1">Stuff</h2> 
    <div class="P1"> 
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
    </div> 
</div>​ 

CSS:

.expanded .plus {display:none;} 
.collapsed .minus {display: none;} 

Javascript:

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(this).closest(".container") 
      .toggleClass("expanded collapsed") 
      .find(".P1").slideToggle("slow"); 
    }); 
}); 

Làm việc demo:. http://jsfiddle.net/jfriend00/MSV4U/