Jquery ẩn hiển thị đối tượng đầu vào

Question

Tôi có mã này trên jsfiddle. Tất cả những gì tôi đang cố gắng làm là ẩn/hiện một đối tượng đầu vào nào đó nếu một giá trị chọn được chọn.

CODE ON JSFIDDLE

Phần html của mã này là ở đây:

<label for="add_fields_placeholder">Placeholder: </label> 
<select name="add_fields_placeholder" id="add_fields_placeholder"> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    <option value="Other">Other</option> 
</select> 
<div id="add_fields_placeholderValue"> 
    Price: 
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 
</div>​ 

Và phần jQuery là ở đây:

$(document).ready(function() 
{ 
    $("#add_fields_placeholder").change(function() { 
     if($(this).val() == "Other") { 
      $("#add_fields_placeholderValue").show(); 
     } 
     else { 
      $("#add_fields_placeholderValue").hide(); 
     } 
    }); 
}); 

Vì vậy, nếu người dùng chọn "Khác", nó hiển thị một đối tượng đầu vào khác.

Vấn đề bây giờ là vấn đề này. Đầu tiên khi bạn mở trang, tùy chọn đầu tiên được chọn theo mặc định và đối tượng đầu vào tùy chọn được hiển thị. Nó ẩn sau khi bạn chọn một tùy chọn khác.

Có bất kỳ mẹo nào để ẩn khi bạn tải trang lần đầu tiên không? Không chỉ khi bạn chọn giá trị theo cách thủ công.

Cảm ơn các bạn.

Answer 1

Chỉ cần thêm:

$("#add_fields_placeholderValue").hide(); 

Sau khi tuyên bố sự kiện thay đổi của bạn trên tải trang.

ví dụ

$(document).ready(function() 
{ 
$("#add_fields_placeholder").change(function() 
{ 
    if($(this).val() == "Other") 
    { 
    $("#add_fields_placeholderValue").show(); 
    } 
    else 
    { 
    $("#add_fields_placeholderValue").hide(); 
    } 
}); 
$("#add_fields_placeholderValue").hide(); 
}); 

dụ làm việc: http://jsfiddle.net/bZXYR/

Answer 2

tôi thường yếu tố ra các ẩn/hiển thị logic:

function foobar(){ 
    if($(this).val() == "Other"){ 
     $("#add_fields_placeholderValue").show(); 
    } 
    else{ 
     $("#add_fields_placeholderValue").hide(); 
    } 
} 

và gọi nó khi tải trang.

$(document).ready(function(){ 
    foobar(); 
    $("#add_fields_placeholder").change(function(){ 
     foobar(); 
    }); 
}); 

nhưng tôi rất tò mò muốn biết những người khác thường làm gì.

Answer 3

Bạn có thể sử dụng css để ẩn nó ban đầu

#add_fields_placeholderValue{display:none;} 

http://jsfiddle.net/FarVX/20/

Ngoài ra bạn có nhiều yếu tố với id giống nhau (chỉ ra bởi Brandon), mà không phải là hợp lệ

Answer 4

Bạn có thể chỉ cần làm điều đó với CSS:

Thay đổi ID tại đây:

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 

kể từ khi bạn đã sử dụng nó ở đây

<div id="add_fields_placeholderValue"> 

và sau đó thêm css này:

#add_fields_placeholderValue { 
    display: none;  
}​ 

Answer 5

nếu bạn thay đổi phương pháp vô danh thành một chức năng callable, bạn sẽ có thể gọi nó trên Sẵn sàng()

ví dụ

$(document).ready(function() { 
    $("#add_fields_placeholder").change(ShowIfOther); 
    ShowIfOther(); 
}); 

function ShowIfOther() { 
    if ($("#add_fields_placeholder").val() == "Other") { 
     $("#add_fields_placeholderValue").show(); 
    } else { 
     $("#add_fields_placeholderValue").hide(); 
    } 
}​ 

Answer 6

Đặt mã sau dưới các yếu tố giữ chỗ:

<script>$('#add_fields_placeholderValue').hide();</script> 

Làm nó trong xử lý sẵn sàng có thể gây 'nhấp nháy' của nguyên tố này trong một số trường hợp:

Twinkling when call hide() on document ready