jQuery实现点击只读Input在对应Span中显示自定义错误

失效原因 #

你的代码失效是因为input的name属性值包含.、[]这类特殊字符，直接拼接进选择器时，jQuery会把这些字符当成选择器语法的一部分（比如.代表类选择器，[]是属性选择器的语法结构），导致无法正确定位到目标span元素。

解决方法 #

方法1：给属性值添加引号包裹 #

在拼接选择器时，用双引号把动态获取的name值包裹起来，让jQuery把整个字符串当成属性值来匹配：

function clicked(item) {
    var id = $(item).attr("name");
    $('span[data-valmsg-for="' + id + '"]').text('Your Text'); 
}

方法2：使用filter方法精准匹配 #

通过filter方法遍历span元素，直接对比data-valmsg-for属性值，避免特殊字符干扰：

function clicked(item) {
    var targetName = $(item).attr("name");
    $('span').filter(function() {
        return $(this).attr('data-valmsg-for') === targetName;
    }).text('Your Text');
}

方法3：利用jQuery的data方法（可选） #

如果页面没有动态修改data-valmsg-for属性的场景，也可以用data()方法获取属性值进行匹配：

function clicked(item) {
    var targetName = $(item).attr("name");
    $('span').filter(function() {
        // data方法会自动把短横线命名转为驼峰式
        return $(this).data('valmsgFor') === targetName;
    }).text('Your Text');
}

内容的提问来源于stack exchange，提问作者Samie Ullah