0

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

HTML 代码：

<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{
        }
    });​​
4

4 回答 4

4

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

$(document).ready(function() {
    $('#id_second').closest('tr').hide();
    $('#id_first').change(function() {    
        if ($(this).val() <0){
            $('#id_second').closest("tr").show()
        }    
        else{
        }
    });
});​​
于 2012-04-20T19:30:53.167 回答
2

请在检查if ($(this).val() <0)条件时使用长度属性

$('#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/

于 2012-04-20T19:40:14.407 回答
0 
$(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 演示

.val()越来越string。您必须将其转换为integer使用parseInt(string,radix).

于 2012-04-20T19:45:38.783 回答
0

对不起我的英语不好。我认为这个解决方案必须正常工作。 

<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>
于 2012-04-20T19:50:24.683 回答