Chuyển đổi văn bản trên thẻ nút

Question

Tôi có tính năng hiển thị các hàng ẩn trong bảng nhưng bây giờ sẽ muốn thay đổi văn bản của tôi.

<script language="javascript" type="text/javascript"> 

function HideStuff(thisname) { 
    tr = document.getElementsByTagName('tr');   
    for (i = 0; i < tr.length; i++) { 
     if (tr[i].getAttribute('classname') == 'display:none;') { 
      if (tr[i].style.display == 'none' || tr[i].style.display=='block') { 
       tr[i].style.display = ''; 
      } 
      else { 
       tr[i].style.display = 'block'; 
      } 
     } 
    } 
} 

Các html như sau ...

<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button> 

Tôi muốn chuyển "Show/Hide" text. Bất kỳ ý tưởng?

Answer 1

Sử dụng jQuery một cái gì đó như thế này có thể làm việc:

$('ShowHide').click(function(){ 
    if ($('hide').css('display') == 'block') 
     $('ShowHide').val("Hide"); 
    else 
     $('ShowHide').val("Show"); 
}); 

Tôi chỉ viết rằng từ đỉnh đầu của tôi mặc dù, vì vậy bạn có thể cần phải thực hiện một số thay đổi, bạn có thể đọc thêm về css jquery api here. Và tất cả những gì tôi làm là sử dụng các chức năng ẩn danh

Answer 2

Không chắc chắn lý do bạn chuyển tên này vào JS vì hiện tại nó không được sử dụng.

Nếu bạn thay đổi cuộc gọi đến:

<button id="ShowHide" onclick="HideStuff(this)">Show</button> 

và sau đó trong js bạn có thể thay đổi nội dung khá dễ dàng:

if (this.value == 'Show') { 
    this.value = 'Hide' 
} 
else { 
    this.value = 'Show'; 
} 

Answer 3

tôi sẽ khuyên bạn sử dụng jquery nhưng bạn chỉ có thể sử dụng javascript của document.getElementById phương pháp

trong chức năng của bạn:

function HideStuff(thisname) { 
    tr = document.getElementsByTagName('tr'); 
    for (i = 0; i < tr.length; i++) { 
     if (tr[i].getAttribute('classname') == 'display:none;') { 
      if (tr[i].style.display == 'none' || tr[i].style.display == 'block') { 
       tr[i].style.display = 'none'; 

      } 
      else { 
       tr[i].style.display = 'block'; 

      } 
     } 
    } 
    if (document.getElementById("ShowHide").value == "show") { 
     document.getElementById("ShowHide").value = "hide"; 
    } 
    else { 
     document.getElementById("ShowHide").value = "show"; 
    } 

} 

Mặc dù, tôi có thể vượt qua trong this thay vì văn bản 'ẩn' trong cuộc gọi chức năng. sau đó yon có thể làm điều đó như zaph0d đã nêu. Của nó một chút sạch hơn sau đó.

Answer 4

$('#HideShow').click(function() 
{ 
    if ($(this).text() == "Show") 
    { 
    $(this).text("Hide"); 
    } 
    else 
    { 
    $(this).text("Show"); 
    }; 
}); 

Thay thế, .toggle() có một .toggle (thậm chí, lẻ); chức năng, sử dụng mà bao giờ có ý nghĩa nhất đối với bạn, một là mã ngắn hơn một chút nhưng có lẽ ít dứt khoát hơn.

$('#HideShow').toggle(function() 
    { 
    $(this).text("Hide"); 
    HideClick('hide'); 
    }, 
    function() 
    { 
    $(this).text("Show"); 
    HideClick('hide'); 
    } 
); 

Chú ý: bạn có thể bao gồm bất kỳ hành động khác mà bạn muốn trong function() khi cần thiết, và bạn có thể loại bỏ các onclick trong đánh dấu/html bằng cách gọi HideClick() chức năng cuộc gọi của bạn trong đó. như tôi minh họa trong ví dụ thứ hai.

Là một theo dõi, và trình bày một sự thay thế, bạn có thể thêm lớp CSS cho CSS của bạn

.hideStuff 
{ 
display:none; 
} 

THEN thêm này trong:

.toggle('.hideStuff'); 

hoặc, trực tiếp hơn: trong nơi thích hợp.

.addClass('.hideStuff'); 
.removeClass('.hideStuff');