1

这是我在stackoverflow上的第一篇文章！我是前端 Web 开发者爱好者和新手……如果我违反了 stackoverflow 礼仪或交通规则，请告诉我或给我一记重击……

我正在尝试评估元素数组中的类名。如果类名包含某个值，那么我想操作该元素的属性。

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

请注意，按钮类命名约定是“share_button_[社交媒体服务名称]”

接下来，我创建一个 for 循环来遍历按钮变量

在 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;   
    }
}

这似乎根本不起作用。这是代码笔，http: //cdpn.io/fKoak

循环遍历像这样的元素的 jquery 数组是一种好习惯吗？

在这种情况下我应该使用 switch 语句并且我是否正确使用它？（有更多可能的情况，然后我有 case 语句并且我没有默认值 - 我希望没有匹配的情况来“注意”）

在这种特殊情况下，我的代码形成没有发生预期的结果有什么问题？

4

3 回答 3

1

我认为做更多这样的事情会更好。

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

于 2013-09-26T15:16:32.540 回答
0

您可以使用 jQuery 的 each() 方法来遍历元素，然后检查 className

$('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_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"
    }
});
于 2013-09-26T15:15:39.833 回答
0

我最终决定放弃 for 循环并使用 jquery .each 方法 - http://api.jquery.com/each/ - 这是上面@adeno 推荐的。@adeno 使用 .each 提供的两种解决方案都很好用，但我最终选择使用 jquery .is 方法https://stackoverflow.com/a/2240085 - http://api.jquery.com/is/ -由于我们决定使用 .each 方法，它已经是一个“jquery 解决方案”，因此使用 .is 方法来评估每个元素的类名是否包含某个值的代码要少得多 - 并且比提议的 .indexOf 具有更大的灵活性和 .split/.pop 方法由 @adeno 在 imo..
@Tom 还提供了一个可行的解决方案。然而，虽然我没有在我的问题中特别提到它，但我想要一个使用迭代器遍历选定按钮元素数组的解决方案。

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;
    }  
});
于 2013-09-27T03:48:21.220 回答