2009-02-25 45 views
5

Tôi có đoạn mã sau đó thực hiện một chức năng tương tự như cách liên kết bình luận làm việc ở đây trên Stackoverflow ... khi nhấp vào nó gây nên một ActionResult và populates một divliên kết Vô hiệu hóa với JQuery

$(function() { 
     $("a[id ^='doneLink-']").live('click', function(event) { 
      match = this.id.match(/doneLink-(\d+)/); 
      container = $("div#doneContainer-" + match[1]) 
      container.toggle(); 

      if (container.is(":visible")) { 
       container.load($(this).attr("href")); 
      } else { 
       container.html("Loading..."); 
      } 
      event.preventDefault(); 
     }); 
    }); 

Tôi muốn có thể làm một việc thay đổi văn bản liên kết mà họ nhấp vào để nói điều gì đó như "Ẩn" và cũng vô hiệu hoá các liên kết khác trong menu nhỏ mà liên kết này cư trú.

Edit: Nguồn đi với chức năng này trông như thế này

<div id="dc_lifelistmenu"style="float:left;padding-bottom:5px;font-size:10pt;width:400px;"> 
    <a href="/entries/addentry/86">Add Entry</a> | 
    <a href="/goals/adddaimoku/86" id="daimokuLink-2">Log Daimoku</a> | 
    <a href="/goals/done/86" id="doneLink-2">Mark Completed</a> | 
    <a href="/goals/remove/86">Remove</a> 
</div><br /> 
<div id='daimokuContainer-2' style="display:none;"> Loading...</div> 
<div id='doneContainer-2' style="display:none;"> Loading...</div> 
+0

câu hỏi hay .......... –

Trả lời

4

Để sửa đổi văn bản của liên kết bên trong hàm của bạn, chỉ cần sử dụng:

this.text('New Text!'); 

Để vô hiệu hoá văn bản khác, chúng tôi sẽ phải xem nguồn của trang. Tôi không chắc chắn những gì bạn có ý nghĩa bởi "các liên kết khác" ...

UPDATE: Dựa trên chỉnh sửa của bạn, sau đó tôi đoán những gì bạn muốn:

$(function() { 
     $("a[id ^='doneLink-']").live('click', function(event) { 
      match = this.id.match(/doneLink-(\d+)/); 
      container = $("div#doneContainer-" + match[1]) 
      container.toggle(); 

      if (container.is(":visible")) { 
       container.load($(this).attr("href")); 
      } else { 
       container.html("Loading..."); 
      } 
      event.preventDefault(); 
      // added 
      this.text('Hide'); 
      // disable others manually, repeat and adjust for each link 
      $("#daimokuLink-" + match[1]).toggle(); 
      // or in one shot, all but the one I clicked 
      $("#dc_lifelistmenu:not(#doneContainer-" + match[1] + ")").toggle(); 
     }); 
    }); 

UPDATE 2: Saw nhận xét của bạn. Để tắt liên kết thay vì ẩn liên kết, hãy tắt onclick bằng cách ghi đè liên kết thay vì sử dụng toggle().

$("#daimokuLink-" + match[1]).click(function() { return false; }); 
+0

$ (this) .tiếp theo ('Văn bản mới!'); tất nhiên,) – ybo

+0

Có điều này đã làm việc ngay bây giờ, để vô hiệu hóa không ẩn các liên kết khác ... chỉ muốn họ không thể nhấp vào được. – dswatik

+0

Cảm ơn điều này đã làm việc hoàn hảo. – dswatik

3

Có một vài cách để tiếp cận này, có lẽ là đơn giản nhất là chỉ cần làm điều gì đó như: $ ('a') lọc ('không: #doneLink') ẩn();.. để ẩn tất cả các liên kết không phải là liên kết bạn đã chỉ định ở trên.

Kiểm tra trang này để biết thêm về bộ chọn jQuery:

http://docs.jquery.com/Selectors

9

Nếu bạn muốn loại bỏ các liên kết thay vì tắt nó:

jQuery('#path .to .your a').each(function(){ 
    var $t = jQuery(this); 
    $t.after($t.text()); 
    $t.remove(); 
}); 

Ghi chú:

  • Bạn cũng có thể sử dụng hàm (k, v) để lấy một trình lặp nd phần tử mà không sử dụng 'this'
  • Hãy thoải mái thay thế jQuery bằng $ nếu bạn đang sử dụng không gian tên mặc định
  • var $ t = jQuery (đây) là chức năng bộ nhớ đệm tham chiếu phần tử và cũng giúp dọn dẹp Mã số
  • thực tiễn tốt là đặt trước các biến thực sự là các mục jQuery với $ để giúp chúng tách biệt trực quan trong mã. Nó cũng giúp bạn nhận ra rằng bạn có thể gọi các phương thức trên chúng.
  • 1

    Cách đơn giản nhất để tắt neo là sử dụng thuộc tính bị vô hiệu hóa, nhưng vấn đề là thuộc tính đã cho chỉ được hỗ trợ bởi IE. Ví dụ, nó sẽ không hoạt động trong FireFox. Nếu bạn muốn mã của mình hoạt động trong các trình duyệt khác nhau, bạn có thể thử lưu các giá trị của thuộc tính href và onclick vào các thuộc tính tùy chỉnh khác, sau đó đặt href="#"onclick="return false;". Kích hoạt lại bạn nên khôi phục các giá trị đã lưu của href và onclick. Đối với hiệu ứng hình ảnh, bạn có thể sử dụng ứng dụng specila css-class.Tôi đã mô tả cách tiếp cận này trong blog của mình - Disable hyperlink

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