在嵌套在for循环（javascript/jquery）中的switch语句中计算jquery数组的元素类名

这是我在stackoverflow上的第一篇帖子！我是一名前端web开发人员爱好者和新手…如果我违反了stackoverflow礼节或道路规则，请让我知道或给我一记耳光

我试图在元素数组中计算类名。如果类名包含某个值，那么我想操纵该元素的属性

首先，我使用存储为变量的jquery创建元素数组：

请注意，按钮类命名约定为“共享\按钮\社交媒体服务名称”

接下来，我创建一个for循环来迭代buttons变量

在for循环中，我有一个switch语句——其目的是评估Buttons数组中的每个元素，并在元素满足特定条件时向其添加href属性

总而言之：

var buttons = $('a[class^="share_button"]');

for (i=0; i < buttons.length; i++) {
    switch (true) {
        case ($(buttons[i]).attr('[class*="twitter"]')):
        console.log('twitter!');
        break;

        case ($(buttons[i]).attr('[class*="linkedin"]')):
        console.log('linkedin!');
        break;

        case ($(buttons[i]).attr('[class*="facebook"]')):
        console.log('facebook_like!');
        break;

        case ($(buttons[i]).attr('[class*="google_plusone"]')):
        console.log('google_plusone!');
        break;

        case ($(buttons[i]).attr('[class*="reddit"]')):
        console.log('reddit!');
        break;   
    }
}

var按钮=$（'a[class^=“share_按钮]）；
对于（i=0；i

这似乎根本不起作用。这是密码笔

这样循环通过jquery元素数组是一种好的做法吗

在这种情况下，我应该使用switch语句吗？我是否正确地使用了它？（有更多可能的案例，我有案例陈述，我没有默认-我希望没有匹配的案例“不做任何事情”）

在这个特定的例子中，我的代码的构造有什么错，没有达到预期的结果？

您可以使用jQuery的each（）方法迭代元素，然后检查类名

$('a[class^="share_button"]').each(function(i, elem) {
    if ( elem.className.indexOf('twitter') != -1 ) {
        console.log('twitter');
    }else if ( elem.className.indexOf('linkedin') != -1 ) {
        console.log('linkedin');
    }else if (..... etc
});

一个更好的方法是保留开关，但是

google\u plusone

有点用下划线把它搞乱了，所以你必须用其他东西替换它：

$('a[class^="share_button"]').each(function(i, elem) {
    switch( elem.className.split('_').pop() ) {
        case 'twitter' :
           console.log('twitter');
           break;
        case 'linkedin' :
           console.log('linkedin');
           break;
        case 'googleplusone' :

           // you'll have to remove the underscore or just check for "plusone"
    }
});

可以使用jQuery的each（）方法对元素进行迭代，然后检查类名

$('a[class^="share_button"]').each(function(i, elem) {
    if ( elem.className.indexOf('twitter') != -1 ) {
        console.log('twitter');
    }else if ( elem.className.indexOf('linkedin') != -1 ) {
        console.log('linkedin');
    }else if (..... etc
});

一个更好的方法是保留开关，但是

google\u plusone

有点用下划线把它搞乱了，所以你必须用其他东西替换它：

$('a[class^="share_button"]').each(function(i, elem) {
    switch( elem.className.split('_').pop() ) {
        case 'twitter' :
           console.log('twitter');
           break;
        case 'linkedin' :
           console.log('linkedin');
           break;
        case 'googleplusone' :

           // you'll have to remove the underscore or just check for "plusone"
    }
});

---

我认为做更多类似的事情会更好

var $buttons = $('a[class^="share_button"]');

var $twitterButtons = $('[class*="twitter"]', $buttons);
$twitterButtons.each(function(i, button) {
    //Do stuff to the twitter button
});

var $linkedinButtons = $('[class*="linkedin"]', $buttons);
$linkedinButtons.each(function(i, button) {
    //Do stuff to the linkedin button
});

var $facebookButtons = $('[class*="facebook"]', $buttons);
$facebookButtons.each(function(i, button) {
    //Do stuff to the facebook button
});

var $google_plusoneButtons = $('[class*="google_plusone"]', $buttons);
$google_plusoneButtons.each(function(i, button) {
    //Do stuff to the google_plusone button
});

var $redditButtons = $('[class*="reddit"]', $buttons);
$redditButtons.each(function(i, button) {
    //Do stuff to the reddit button
});

---

将第二个参数添加到选择器可以为它们提供上下文。因此，

$（“[class*=“twitter”]”，$buttons）

查看

$buttons

并选择那些包含

twitter

的类，我认为这样做会更好

var $buttons = $('a[class^="share_button"]');

var $twitterButtons = $('[class*="twitter"]', $buttons);
$twitterButtons.each(function(i, button) {
    //Do stuff to the twitter button
});

var $linkedinButtons = $('[class*="linkedin"]', $buttons);
$linkedinButtons.each(function(i, button) {
    //Do stuff to the linkedin button
});

var $facebookButtons = $('[class*="facebook"]', $buttons);
$facebookButtons.each(function(i, button) {
    //Do stuff to the facebook button
});

var $google_plusoneButtons = $('[class*="google_plusone"]', $buttons);
$google_plusoneButtons.each(function(i, button) {
    //Do stuff to the google_plusone button
});

var $redditButtons = $('[class*="reddit"]', $buttons);
$redditButtons.each(function(i, button) {
    //Do stuff to the reddit button
});

---

将第二个参数添加到选择器可以为它们提供上下文。因此，

$（'[class*=“twitter”]'，$buttons）

检查

$buttons

并选择那些包含

twitter
的类的按钮。我最终决定放弃for循环并使用jquery。每个方法都是上面@adeno推荐的。@adeno using提供的两个解决方案都很好，但我最终选择了jquery.is方法——因为我们决定使用它。每个方法都已经是一个“jquery解决方案”因此，如果使用.is方法来评估每个元素的类名是否包含某个值，那么代码就少了很多，并且比imo中@adeno提出的.indexOf和.split/.pop方法更灵活。

@汤姆还提出了一个可行的解决办法。然而，尽管我在问题中没有特别提到它，但我想要一个使用迭代器遍历所选按钮元素数组的解决方案

var $buttons = $('a[class^="share_button"]');

$buttons.each(function(i,e){  
    switch (true) {
        case ($(e).is('[class*="twitter"]')):
        alert('yea! it\'s a twitter button - now do something');
        break;

        case ($(e).is('[class*="linkedin"]')):
        alert('yea! it\'s a linkedin button - now do something');
        break;

        case ($(e).is('[class*="facebook"]')):
        alert('yea! it\'s a faceboook button - now do something');
        break;

        case ($(e).is('[class*="google_plusone"]')):
        alert('yeah! it\'s a google plus one button - now do something');
        break;

        case ($(e).is('[class*="reddit"]')):
        alert('yea! it\'s a reddit one button - now do something');
        break;
    }  
});

我最终决定放弃for循环并使用jquery。每个方法都是上面@adeno推荐的。@adeno using提供的两个解决方案都很好，但我最终选择了jquery.is方法——因为我们决定使用它。每个方法都已经是一个“jquery解决方案”因此，如果使用.is方法来评估每个元素的类名是否包含某个值，那么代码就少了很多，并且比imo中@adeno提出的.indexOf和.split/.pop方法更灵活。

@汤姆还提出了一个可行的解决办法。然而，尽管我在问题中没有特别提到它，但我想要一个使用迭代器遍历所选按钮元素数组的解决方案

var $buttons = $('a[class^="share_button"]');

$buttons.each(function(i,e){  
    switch (true) {
        case ($(e).is('[class*="twitter"]')):
        alert('yea! it\'s a twitter button - now do something');
        break;

        case ($(e).is('[class*="linkedin"]')):
        alert('yea! it\'s a linkedin button - now do something');
        break;

        case ($(e).is('[class*="facebook"]')):
        alert('yea! it\'s a faceboook button - now do something');
        break;

        case ($(e).is('[class*="google_plusone"]')):
        alert('yeah! it\'s a google plus one button - now do something');
        break;

        case ($(e).is('[class*="reddit"]')):
        alert('yea! it\'s a reddit one button - now do something');
        break;
    }  
});

这个（以及OPs）代码的问题在于，如果一个按钮同时具有twitter和linkedin类，那么它只会得到twitter更改。如果你知道一个按钮永远不会有多个这样的社交网络类，那也没关系。@Tom-一个社交服务的按钮究竟为什么会有属于两个不同社交服务的类？这不是我真正想说的。只是说，如果它这样做了，您的代码将有意外的行为。它会优先考虑在你的switch语句/if-else-if链中较高的社交网络。另外，我还说，如果他们永远不会在一个按钮上打开多个社交网络课程，那就不会有任何问题。@adeno感谢您的反馈。我搞乱了。每个方法都无法正常工作-似乎将索引和元素参数传递给回调函数是一件大事-感谢您为我澄清这一点（+1，如果我有代表的话）。必须假设，每个和for循环在这里都是可互换的？不管怎样，我决定了。每个方法都有一个switch语句。尽管如此，我没有使用split方法，而是使用.is方法对我在原始问题中使用的属性选择器从jquery fam中保留的数组中弹出最后一个字符串…我将在下面发布我的解决方案..关于