jQuery $ (this) .attr ("id") không hoạt động

Question

như tiêu đề cho biết, tôi tiếp tục nhận được "không xác định" khi tôi cố gắng lấy thuộc tính id của phần tử, về cơ bản những gì tôi muốn làm là thay thế một phần tử với một hộp đầu vào khi giá trị là "khác".

Đây là mã:

function showHideOther(obj){ 

    var sel = obj.options[obj.selectedIndex].value; 
    var ID = $(this).attr("id"); 

    alert(ID); 


    if(sel=='other'){ 

     $(this).html("<input type='text' name='" + ID + "' id='" + ID + "' />"); 

    }else{ 
     $(this).css({'display' : 'none'}); 
    } 
} 

HTML:

  <span class='left'><label for='race'>Race: </label></span> 
      <span class='right'><select name='race' id='race' onchange='showHideOther(this);'> 
      <option>Select one</option> 
      <option>one</option> 
      <option>two</option> 
      <option>three</option> 
      <option value="other">Other</option> 
      </select> 
      </span> 

Nó có lẽ là một cái gì đó nhỏ mà tôi không nhận thấy, những gì tôi làm sai?

Thanx trước!

Answer 1

Do cách thức hàm được gọi (tức là một cuộc gọi đơn giản đến một biến chức năng), this là đối tượng chung (trong đó window là một bí danh trong trình duyệt). Sử dụng thông số obj để thay thế.

Ngoài ra, việc tạo đối tượng jQuery và sử dụng phương thức attr() để lấy ID phần tử không hiệu quả và không cần thiết. Chỉ cần sử dụng thuộc tính id của phần tử, hoạt động trong tất cả các trình duyệt.

function showHideOther(obj){ 
    var sel = obj.options[obj.selectedIndex].value; 
    var ID = obj.id; 

    if (sel == 'other') { 
     $(obj).html("<input type='text' name='" + ID + "' id='" + ID + "' />"); 
    } else { 
     $(obj).css({'display' : 'none'}); 
    } 
} 

Answer 2

Bạn đang mong đợi gì $(this) để tham khảo?

Bạn có nghĩa là sel.attr("id"); có lẽ không?

Answer 3

Trong bối cảnh chức năng "này" nó không đề cập đến các yếu tố lựa chọn, nhưng để trang tự

• Thay đổi var ID = $(this).attr("id"); để var ID = $(obj).attr("id");

Nếu obj là đã là một jQuery Object, chỉ cần loại bỏ $() xung quanh nó.

Answer 4

sử dụng this trong một hàm, khi bạn nên sử dụng tham số.

Bạn chỉ sử dụng $ (this) trong callbacks ... từ các lựa chọn như

$('a').click(function() { 
    alert($(this).href); 
}) 

Cuối cùng, cách thích hợp (sử dụng ví dụ mã của bạn) sẽ thực hiện điều này

obj.attr('id');

Answer 5

Thay đổi

var ID = $(this).attr("id"); 

để

01.

var ID = $(obj).attr("id"); 

Ngoài ra bạn có thể thay đổi nó để sử dụng jQuery xử lý sự kiện:

$('#race').change(function() { 
    var select = $(this); 
    var id = select.attr('id'); 
    if(select.val() == 'other') { 
     select.replaceWith("<input type='text' name='" + id + "' id='" + id + "' />"); 
    } else { 
     select.hide(); 
    } 
}); 

Answer 6

Tháo inline event handler và làm điều đó hoàn toàn không phô trương, giống như

​$('​​​​#race').bind('change', function(){ 
    var $this = $(this), 
     id = $this[0].id; 

    if(/^other$/.test($(this).val())){ 
     $this.replaceWith($('<input/>', { 
      type: 'text', 
      name: id, 
      id: id 
     })); 
    } 
});​​​ 

Answer 7

tôi khuyên bạn nên đọc thêm về this keyword .

Bạn không thể mong đợi "điều này" để chọn thẻ "chọn" trong trường hợp này.

Điều bạn muốn làm trong trường hợp này là sử dụng obj.id để lấy id của thẻ đã chọn.

Answer 8

Bạn cũng có thể viết toàn bộ chức năng của mình dưới dạng tiện ích mở rộng jQuery, vì vậy bạn có thể làm điều gì đó dọc theo dòng `$ ('# element'). ShowHideOther();

(function($) { 
    $.extend($.fn, { 
     showHideOther: function() { 
      $.each(this, function() { 
       var Id = $(this).attr('id'); 
       alert(Id); 

       ... 

       return this; 
      }); 
     } 
    }); 
})(jQuery); 

Không phải là câu trả lời cho câu hỏi của bạn ... Chỉ cần ăn để suy nghĩ.

Answer 9

Bạn có thể làm

onchange='showHideOther.call(this);'

thay vì

onchange='showHideOther(this);'

Nhưng sau đó bạn cũng cần phải thay thế obj với this trong hàm.