使用 jQuery 进行类更改并接收元素内容的事件答案

【问题标题】：event for class change using jQuery and recieving the element's content使用 jQuery 进行类更改并接收元素内容的事件
【发布时间】：2014-01-09 19:52:08
【问题描述】：

当一个类被添加到某个对象时，是否有任何 jQuery 事件触发，它可以告诉我元素的内容是什么？让我用一个例子来解释一下。假设我有一系列divs，都有相同的类但不同的内容。

<div class="block">content a</div>
<div class="block">content b</div>
<div class="block">content c</div>
<div class="block">content d</div>

在某个时刻，他们中的一个会获得额外的课程，比如说selected：

<div class="block">content a</div>
<div class="block">content b</div>
<div class="block selected">content c</div>
<div class="block">content d</div>

我不知道哪一个是选定的。所以我想在其中一项获得selected 类时运行一个函数，并且我希望该函数接收所选元素的内容。

$('.block').on('event?', function(content){
  //content is equal to "content c"

});

在 jQuery 中有类似的东西吗？我可以创建一个吗？

【问题讨论】：

您可以使用jQuery.trigger('YourEventHere');触发自定义事件
其中一个元素如何获得“选定”类？在一个事件？以编程方式？手动？
在鼠标悬停时，但不是直接。如果我不使用鼠标事件就无法做到这一点，那很好。
@ReuvenKarasik 如果你真的想检测属性变化，你可以看看这个例子stackoverflow.com/a/17172729/1385672 - 虽然我认为当你“添加”selected 时你应该能够做你想做的事类
是的，但这就是我不添加所选课程的重点。事实上，我使用 twitter-typeahead 并且我想在用户用鼠标突出显示建议时调用一个函数，而我发现这样做的最好方法是跟踪“活动”类

标签： javascript html javascript-events jquery

【解决方案1】：

我有一个插件给你。

将其插入到您的脚本中：

//@Author Karl-André Gagnon
$.hook = function(){
    var arg = Array.prototype.slice.call(arguments)
    $.each(arg, function(){
        var fn = this
            if(!$.fn['hooked'+fn]){
            $.fn['hooked'+fn] = $.fn[fn];
            $.fn[fn] = (function(){
                this['hooked'+fn].apply(this, arguments);
                this.trigger(fn, arguments);
            })
        }
    })
}

然后像这样激活它：

$.hook('addClass');

这将在添加类上添加一个“事件启动器”。

然后将它绑定到你的块上：

$('.block').on('addClass', function(e,a){ //e == events a == first arguments when calling addClass()
   if(a === "selected"){//Just a validation
       //Your code
   }
})

【讨论】：

太棒了。它会在每个添加的类上激活，还是我需要指定一个特定的类名来监控？
我没有注意到验证。但是alert($(a).text()); 不起作用。我以为a 是一个对象，而您在验证时出错了，但现在我意识到不是。你能帮我提醒更改对象的内容吗？（另外：你有一些错误，你写了 a1 而不是 a 和 addClas 而不是 addClass。在 StackOverflow 接受我的编辑之前，我必须进行 6 次更改：）
目标是this，所以你可以做$(this).text();。还要感谢您的编辑，不得不为您调整我的代码，但我只是做了一个小检查。
谢谢。它现在可以工作了，这是一个很棒的插件:)

【解决方案2】：

您可以使用以下方法获取其文本：

$('element').text();

这将为您提供元素的文本！

对你来说，这将是

$('.selected').text();

现在您可以将其显示为警报，或将其写入某处或将其用作变量！它的价值为

content c

或者该元素将为您提供什么价值！

更多：http://api.jquery.com/text/

【讨论】：

但是每次.block 元素获得.selected 类时，我如何执行此命令？
你可以把这个添加到添加@reuven类的函数中
我没有添加类，是 Typeahead 插件在鼠标悬停时将类添加到建议中。
然后你可以将它添加到mouseover的函数中为：$('element').mouseover(function () { } ..这样，当类被添加时..函数将运行！

【解决方案3】：

function test(someClass){
  var content;
  if($('.block').hasClass(someClass)) {
     content = $('.' + someClass).html();
  }
}

然后你用你希望的类作为参数调用函数：test('classname');

【讨论】：