Question

我有一个脚本，它将一个类添加/删除到两个元素，并显示/隐藏第三个元素，如果在keyup上的文本输入字段中找到某个术语。有问题的三个元素是span，text-input和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>

等

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

Answer 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/

通过后缀，jQuery选择器匹配变量

1 个答案: