Question

我不知道如何咬这个问题。以下两个示例工作正常，但我想避免 DRY 问题。

parentElement.on('focusout', '.foo-class', function () {
    // console.log('hello foo')
});

和

parentElement.on('focusout', '.bar-class', function () {
    // console.log('hello bar')
});

我想让它更具普遍性。我必须处理两个类，而父母保持不变。

假设这是第一步：

parentElement.on('focusout', classValue, function () {
    // How to display this class so I can call different stuff depending on the class value?
    // console.log('hello ' + classValue)
});

Answer 1

可能是这条线上的东西，从瓜地奥的解决方案中提炼出来。

小提琴：https://jsfiddle.net/pvorhknv/2/

它在这里做的是获取为处理程序调用的元素并访问属性。您可以将此元素“this”用于任何此类用途。

$(document).on('focusout', 'input', callme);

function callme(){
   console.log('hello ' + $(this).attr('class').split('-')[0])
}

更新：

您可以使用它来标记元素的数据属性。小提琴：https://jsfiddle.net/pvorhknv/3/

<input type='text' class='foo-class' data-classname="foo">
<input type='text' class='bar-class' data-classname="bar">

因此你可以访问它们，

function callme(){
   console.log('hello ' + $(this).data('classname'));
}

Answer 2

要查看（1）元素是否具有特定类，以及（2）获取$（this）所有类，请参阅以下内容：

parentElement.on('focusout', classValue, function () {
    // (1). find out if element has class 'foo-class'
    if $(this).hasClass('foo-class'){
      // ...
    }

    // (2). for each class of element do something
    $($(this).attr('class').split(' ')).each(function() { 
        if (this !== '') {
            // ...
        }    
    });
)};

Answer 3

您可以使用data属性指定要运行的事件。我的解决方案如下（简单而已，更不用说了）：

HTML

<div class="event" data-color-event="blue">click me = blue</div>

JS

   // one listener 
   $('body').on('click', '.event', function() {
        var ev = $(this).data('color-event');
      $('body')[ev]();
    });

    // event functions on demand
    $.fn.blue = function() {
        alert('blue');
    }

    $.fn.red = function() {
        alert('red');
    }

JSFIDDLE DEMO

Answer 4

用逗号分隔你的类，然后检查回调中的类。

https://jsfiddle.net/guanzo/dmpgxxt0/

$('.container').on('click','.test1,.test2',function(){
    console.log($(this).attr('class'))
})

Answer 5

你试过吗

parentElement.on('focusout', '.foo-class, .bar-class', function () {
// console.log('hello foo')
});

还有更多：

parentElement
    .on('focusout', '.foo-class, .bar-class', function () {
        // console.log('hello foo')
    })
    .on('click', '.baz-class', function() { alert('xx'); })
;

我如何阅读＆＃34; .on（）＆＃34; jQuery中的方法参数？

5 个答案: