用jquery切换一个随机类

这个想法是有一个按钮，点击后，添加一个随机类从数组中挑选它到另一个div。我想要的是当我重新点击它时，使用相同的按钮从其中删除任何随机添加的类。用jquery切换一个随机类

这里有一个小提琴：https://jsfiddle.net/jLmj7bwk/1/

，这是功能

$(".button").click(function() { 

    var classes = ['one', 'two', 'three']; 
    var randomnumber = Math.floor(Math.random() * classes.length); 

    $(".element").toggleClass(classes[randomnumber]); 

    if ($(this).text() == "cancel added class") 
     $(this).text("add random class") 


    else 
     $(this).text("cancel added class"); 

});

这确实增加一类，但它一直在增加他们不将其移除。你能帮忙吗？非常感谢！

来源

2015-04-04 valerio0999

你是在正确的轨道上。您必须使用toggleClass方法，这是最有效和首选的方式，也是最佳做法。看我的解决方案。 – maxspan 2015-04-04 14:03:03

这是怎么回事？

https://jsfiddle.net/jLmj7bwk/3/

$(".button").click(function() { 

var classes = ['one', 'two', 'three']; 
var randomnumber = Math.floor(Math.random() * classes.length); 

if($(this).text() === "cancel added class") 
{ 
    $(".element").removeClass(classes.join(' ')); 
    $(this).text("add random class"); 
} 
else 
{ 
$(".element").addClass(classes[randomnumber]); 
$(this).text("cancel added class"); 
} 

});

.removeClass可以在一个单一的呼叫多个类，如果他们用空格隔开，因此，如果您删除了所有从阵列中的类，然后添加一个随机的一个，它的工作原理。

请注意，它有时看起来像颜色没有改变。它的确如此，但由于阵列很小，颜色相同的几率很高。

来源

2015-04-04 13:05:30 Frayt

对不起，这是行不通的：/一旦我重新点击它，它应该变回灰色。它不断添加颜色 – valerio0999 2015-04-04 13:07:07

好吧，1分钟。 – Frayt 2015-04-04 13:07:51

更新了我的帖子。 – Frayt 2015-04-04 13:10:57

您可以使用removeClass和addClass方法而不是toggleClass。 Array.prototype.join可用于为removeClass创建参数。

$(".element").removeClass(classes.join(' ')) // 'one two three' 
      .addClass(classes[randomnumber]);

看来我还没有完全明白这个问题。如果类应随机而在下一个点击添加应删除：

var $e = $(".element"); 
var classes = ['one', 'two', 'three']; 

$(".button").click(function() { 
    var random, hasClass; 

    hasClass = classes.filter(function(cls) { 
     return $e.hasClass(cls); 
    }).length; 

    if (hasClass) { 
     $(this).text('add random class'); 
     $e.removeClass(classes.join(' ')); 
    } else { 
     $(this).text('cancel added class'); 
     random = Math.floor(Math.random() * classes.length); 
     $e.addClass(classes[random]); 
    } 
});

https://jsfiddle.net/ceLav6d6/

来源

2015-04-04 13:05:05 undefined

你能整合这是小提琴吗？不知道该把它放在哪里:)谢谢 – valerio0999 2015-04-04 13:07:35

这是根据toggleClass方法切换类的有效方法。

JSFIDDLE

//使用Javascript

var isAddingClass = true; 
    var currentClass = ''; 
    $(".button").click(function() { 

     var classes = ['one', 'two', 'three']; 
     var randomnumber = Math.floor(Math.random() * classes.length); 

     if (currentClass == '') { 
      currentClass = classes[randomnumber]; 
     } 
     $(".element").toggleClass(currentClass, isAddingClass); 

     if ($(this).text() == "cancel added class") { 
      $(this).text("add random class"); 
      isAddingClass = true; 
      currentClass = classes[randomnumber]; 
     } 
     else { 
      $(this).text("cancel added class"); 
      isAddingClass = false; 
     } 

    });

来源

2015-04-04 13:59:39 maxspan

用jquery切换一个随机类

回答

相关问题