0

如果在 keyup 的文本输入字段中找到某个术语，我有一个脚本，可以将一个类添加/删除到两个元素，并显示/隐藏第三个元素。有问题的三个元素是跨度、文本输入和 div。但是我有五组，我希望能够为所有五组只编写一次脚本，但它只影响当前的三个元素集。我尝试使用带有选择器的开头，但它将更改应用于所有五组。有没有办法让它仅在选择器的后缀匹配时应用更改？

这些集合都有以“base1”或“base2”等结尾的 ID，最多五个。这是当前脚本：

$('input[id^=base]').keyup(function() {
    var str = $('input[id^=base]').val(); 
    var i = $('input[id^=base]');       
    var s = $('span[id^=ssfa-abspath-base]');
    var e = $('div[id^=ssfa-error-base]');

    if (/wp-admin/i.test(str) || /wp-includes/i.test(str)) {
        $(i).addClass('ssfa-error');
        $(s).addClass('ssfa-error');
        $(e).show(600);         
   }
    else{
        $(i).removeClass('ssfa-error');
        $(s).removeClass('ssfa-error');         
        $(e).hide(600);

   }

然后html基本上就是：span1 > input1 > div1 <br> span2 > input2 > div2 <br>等。

编辑

为了更清楚：

设置 1：

<span id=something-base1></span><input id=base1></input><div id=something-else-base1></div>

第 2 组：

<span id=something-base2></span><input id=base2></input><div id=something-else-base2></div>

ETC

我只想编写脚本一次，而不是五次，每组一次。为此，我需要它根据后缀对它们进行分组，因此它仅将类更改应用于当前集（在文本输入中找到“wp-admin”或“wp-includes”的匹配值。

4

1 回答 1

1

您走在正确的轨道上，但是一旦进入keyup处理程序，您只想处理有问题的特定元素/元素集。例如

$('input[id^=base]').each(function() {
    var idSuffix = this.id,
        i = $(this),
        s = $('#ssfa-abspath-' + idSuffix),
        e = $('#ssfa-error-' + idSuffix),
        rx = /wp-(admin|includes)/i;

    i.on('keyup', function() {
        var test = rx.test(i.val());

        i.toggleClass('ssfa-error', test);
        s.toggleClass('ssfa-error', test);
        if (test) {
            e.show(600);
        } else {
            e.hide(600);
        }
    });
});

在这里演示 - http://jsfiddle.net/buQNp/

于 2013-10-29T04:34:18.090 回答