Question

$(document).ready(function() {
    $(".test").hide();

    var img = $('<img class="imgtick">'); 
    img.attr('src', "../Image/tick.png");
    img.appendTo('.test');


    $(".text1").change(function() {
        $(".test").show();
    });
});

<label>Address:</label>
<input type="text" class="text1" name="address" value="" placeholder="Address"> 
<span class="test"></span><br>

<label>Contact Number:</label>
<input type="text" class="text1"  name="contact" value="" placeholder="Contact" maxlength="8">
<span class="test"></span><br>

<label>Email:</label>
<input type="email" class="text1" name="email" value="" placeholder="Email Address">
<span class="test"></span><br>

我给了一个span类“test”并用类“imgtick”创建img标签并附加到类“test”并隐藏所有图像。

但我希望文本框处于更改状态时只显示1个图像。是否可以使用类或者我必须为每个文本框定义一个id，以便在onchange时使图像单独出现？

Answer 1

您可以使用jQuery next()

选择下一个span元素

$(".text1").change(function() {
    $(this).next("span").show();
});

或者如果你想使用班级

$(this).next(".test").show();

jQuery next()获得匹配元素集中每个元素的紧随其后的兄弟

Here是一个有效的例子

Answer 2

您的更改功能应为：

$(".text1").change(function() { $(this).next(".test").show(); });

jquery。改变和图像显示

2 个答案: