javascript - jquery .Change 和图片展示

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 选择下一个 span 元素 next()

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

或者如果你想使用类使用

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

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

Here是一个工作示例