Question

很抱歉提出这样一个基本问题。说，我有两个输入。第一个始终可见，而第二个仅在第一个值小于0时显示。我尝试使用.change来实现此活动，但它不起作用。那么有人能给我一些建议吗？提前谢谢。

HTML code：

<table>
<tr><th><label for="id_first">First input:</label></th><td><input type="text" name="First input" id="id_first" /></td></tr>
<tr><th><label for="id_second">Second input:</label></th><td><input type="text" name="First input" id="id_second" />
</td>
</tr>
</table>

jQuery代码

<script type="text/javascript" src=" ../stylesheets/jQuery-1.7.2.js"></script> 

<script>
$(document).ready(function() {
    $('#id_second').closest('tr').hide();
    $('#id_first').change(function() {    
    if ($(this).val() <0){
        $('#id_second').show()}    
    else{
        }
    });

Answer 1

您的jquery代码应如下所示。你有一个语法错误。您没有关闭更改功能，您必须显示“tr”，而不仅仅是输入元素

$(document).ready(function() {
    $('#id_second').closest('tr').hide();
    $('#id_first').change(function() {    
        if ($(this).val() <0){
            $('#id_second').closest("tr").show()
        }    
        else{
        }
    });
});

Answer 2

请在检查if ($(this).val() <0)条件

时使用length属性

$('#id_second').closest('tr').hide();
$('#id_first').keyup(function() {    

if ($(this).val().length < 1){
    $('#id_second').closest("tr").show()}    
else{
        }
        });

（代码@ dg3）

http://jsfiddle.net/chepe263/jPybT/3/

Answer 3

$(document).ready(function() {
     $('#id_second').parents("tr").hide();

     $("#id_first").keyup( function() {
        if((parseInt($(this).val(), 10)<0)){
            $('#id_second').parents("tr").show();}
        else {
            $('#id_second').parents("tr").hide();}
     });
});

JsFiddle Demo

.val()正在获得string。您必须使用integer将其转换为parseInt(string,radix)。

Answer 4

抱歉我的英文。我认为这个解决方案必须正常工作。

<table>
        <tr>
            <th>
                <label for="id_first">First input:</label>
            </th>
            <td>
                <input type="text" name="First input" id="id_first" />
            </td>
        </tr>
        <tr>
            <th>
                <label for="id_second" style='display:none'>Second input:</label>
            </th>
            <td>
                <input type="text"  name="First input" id="id_second" style='display:none'/>
            </td>
        </tr>
    </table>

<script>
        // Subscribe on keyup event in first input
        $('#id_first').on('keyup', function(){
            // here "this" refers to input in which we have press the key

            // Getting first input value
            var inputValue = this.value;


            // Casting input value to number
            // -12a became -12
            // a12 or any value starting from a character became 0 
            inputValue = parseFloat(inputValue) || 0;


            // Now we selecting input and a label which we want to show/hide
            var $second = $('#id_second, label[for="id_second"]');


            // Check if first one's value is less than 0 
            // and shows the second row, if it is
            if(inputValue < 0)
                $second.show();
            // Otherwise hides the second row
            else
                $second.hide();

        })

    </script>

jQuery以当前输入值为条件显示额外字段

4 个答案: