0

代码版本 1：

        var one = "one";
        $.each($(".Buttons"),(function() {
            if ($("this:contains(one)")) {
                $(this).addClass( "currentButton" ); 
            };
        }));

代码版本 2：

        var one = "one";
        $(".Buttons").each(function(a, e) {
            if ($("e:contains(one)"))
            { $(e).addClass( "currentButton" ); };
        });

我想你明白我在做什么。我的问题是只更新文本匹配的特定元素，但是当只有一个匹配时所有元素都会更新。

编辑：下面的HTML：

<input type="submit" class="Buttons" value="one">
<input type="submit" class="Buttons" value="two">
<input type="submit" class="Buttons" value="one & two">

我正在使用输入，因为它们是使用 asp.net/c# 以编程方式添加的按钮

我尝试了几种解决方案，但我仍然让每个元素都添加了类。

我用输入更新了这个 jsfiddle，现在它根本没有受到影响。估计:contains不会input value查

使用我原来的方法，我将其修复如下，或者查看 Elias 的答案：

        $(".Buttons").each(function() {
            if ($(this).attr("value") == one) {
                $(this).addClass("currentButton");
            };
        });
4

5 回答 5

3

不过，做你正在做的事情的最简单方法是单线：

var one = "one";
$(".Buttons").filter(":contains('"+one+"')").addClass("currentButton");
//or
$(".Buttons").filter(":contains('one')").addClass("currentButton");

检查小提琴

这确实意味着您的:contains选择器是一个常量值，如果您需要它根据其他内容进行更改，请将其包装在一个函数中：

function changeClass(contains)
{
    contains = contains || 'one';//default value
    $('.Buttons').filter(":contains('"+contains+"')").addClass('currentButton');
}

当然，与往常一样，您可以将所有内容更改为参数，以便此函数更有可能可重用：

function changeClass(selector, filter, newClass)
{
    $(selector).filter(filter).addClass(newClass);
}
changeClass('.Buttons', ':contains("one")', 'currentButton');

您的问题是由将字符串分隔符包含在其中一个this或e内部引起的，这有效地将它们转换为字符串常量，而不是对您尝试更改的 DOM 节点的引用
发生的情况是两者：

if ($("e:contains(one)"))
{
    $(e).addClass( "currentButton" );
}

和

if ($("this:contains(one)"))
{
    $(this).addClass( "currentButton" );
}

评估为：

if ([])
{
    $(this).addClass('currentButton');
}

换句话说：您将字符串常量传递给主 jQuery 函数$()（可悲的是，它们是空的，因此返回了一个空的类似 jQuery 的数组对象，并且任何对象/数组都是 JS 中的真值，因此检查的表达式被评估为true，因此，节点类被更改。
你也可以这样写：

if ($('foobar, see if it matters what I write here'))
{
    console.log('It doesn\'t');
}

它会It doesn't一次又一次地记录。

编辑

作为对您的评论的回应，如果您真正想要的是根据元素的 value 属性进行过滤：

$('.Buttons').filter(function()
{//this function will be applied to each element returned by the $('.Buttons') selector
 //only those for which this callback returns true will get the currentButton class
    return /\bone\b/i.test($(this).val());
    //or, equally valid:
    return ($(this).val().indexOf('one') !== -1);
}).addClass('currentButton');

请注意，/\bone\b/i它将接受"ONe"以及"One"或"one" ，但如果 value 属性包含"bones"则不会返回 true ，而indexOfis CaseSensitive ，但不检查one是否是单词的一部分或不是。
对于区分大小写的正则表达式，您可以使用/\bone\b/，而不使用i.

同一事物的更严格但更短的版本可能是：

$('.Buttons[value~="'+one+'"]').addClass("currentButton");

但是有很多 jQ 选择器可以使用，最好把参考放在胸前

于 2013-07-31T12:07:38.513 回答
0

你可以很简单地做到这一点，而不需要每个函数。jQuery 选择器将为您进行过滤，然后您更新与选择器匹配的每个元素。

var text = "text to test for";

$(".Buttons:contains(" + text + ")").addclass("currentButton");

这是一个 jsFiddle来演示。

于 2013-07-31T12:05:54.073 回答
0

$("e:contains(one)")这里一个被视为字符串文字。

试试看，"e:contains('"+one+"')"现在将评估你的字符串。

于 2013-07-31T12:06:12.510 回答
0

演示

使用 is()：

var one = "one";
$(".Buttons").each(function () {
    if ($(this).is(":contains('"+one+"')")) {
        $(this).addClass("currentButton");
    };
});
于 2013-07-31T12:03:45.110 回答
0 
    var one = "one";
    $(".Buttons").filter(function () {
        return $(":contains('"+one+"')",this);
    }).addClass("currentButton");

或者

    var one = "one";
    $(".Buttons").filter(function () {
        return this.innerHTML == 'one'; // note: innerHTML may be deprecated soon, avoid it
    }).addClass("currentButton");

jsFiddle 演示

于 2013-07-31T12:06:32.710 回答