在“区域标签”上将 jquery 与 css 结合使用

Question

我创建了这个example

如您所见，我使用 area-tag 将图像分成四个样方。

第一个样方的数据名称为：abc，第二个样方的数据名称为：def，

第三个样方的数据名称：ghi，第四个样方的数据名称：jkl。

此外，还有一个用于搜索的输入。我想问的是，是否可以在输入中输入任何内容并查看输入是否与数据名称之一匹配。

场景：

我在输入中键入一个“a”=> 每个数据名称开头带有“a”的区域都应保持原样，但其他区域的不透明度应为“1”。这可以使用 keyup-event 吗？例如：

$(document).ready(function () {
    $("#searchfield").keyup(function() {
        var input = $.("#searchfield").val();
        $( "area[data-name^=' + input + ']" ).css( "opacity" , "1" );
    });
});

以及如何让 jquery 搜索 html？我知道如何做 ajax 等。但是在网站的源代码中进行 jquery 搜索？

我关注了这个article，但是没有结果：

需要你的帮助

问候

Answer 1

输入是可变的，所以你需要把它放在双引号之外：

$( "area[data-name^='" + input + "']" ).css( "opacity" , "1" );

也更好用：

var input = $(this).val();