用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切換一個隨機類

回答

相關問題