Изменение цвета динамически

Question

Я хочу изменить цвет div после проверки, является ли он красным или зеленым.

Я пробовал это, но не работает.

if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color")=="rgb(255,0,51)") { 
    var s = confirm("Are you sure you want to pushback?"); 
    if (s == true) { 
    $(this).css("background-color","#ffffff"); 
    } 

Это правильно?

Answer 1

Браузер возвращает значение как rgb (34, 187, 69). но вы сравниваете его как rgb (34,187,69). Вот почему он не выполняет внутренние утверждения.

Надеюсь, что он решает вашу проблему.

Answer 2

Цвет отличается от браузера. Поэтому используйте класс в css и проверьте с помощью jquery с помощью hasClass().

.green{ 
    background-color: green; 
} 

.red{ 
    background-color: red; 
} 

if ($(this).hasClass("green") || $(this).hasClass("red")) { 
    var s = confirm("Are you sure you want to pushback?"); 
    if (s == true) { 
    $(this).css("background-color","#ffffff"); 
    } 

Answer 3

Другой пример:

$(document).ready(function(){ 
 
    $('#wrap').click(function(){ 
 
    var color_ = $(this).css("background-color"); 
 
    var colorr = rgb2hex(color_); 
 
    if (colorr=='#ff0000') { 
 
    var s = confirm("Are you sure you want to pushback?"); 
 
    if (s == true) { 
 
    $(this).css("background-color","#ffffff"); 
 
     } 
 
    } 
 
    }); 
 
}); 
 
    
 
    var hexDigits = new Array 
 
     ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 
 

 
//Function to convert hex format to a rgb color 
 
function rgb2hex(rgb) { 
 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
 
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
 
} 
 

 
function hex(x) { 
 
    return isNaN(x) ? "00" : hexDigits[(x - x % 16)/16] + hexDigits[x % 16]; 
 
}

#wrap{ 
 
    background:red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap">Click Me</div>

Answer 4

Попробуйте:

function changeColor(obj) { 
    if ($(obj).css("background-color") == "rgb(34, 187, 69)" || $(obj).css("background-color") == "rgb(255, 0, 51)") { 
     var s = confirm("Are you sure you want to pushback?"); 
     if (s == true) { 
      $(obj).css("background-color", "#ffffff"); 
     } 
    } 
} 

на HTML:

<input type="button" id="But_Change" value="changeColor" style="background-color: rgb(34,187,69)" onclick="changeColor(this)" /> 

Answer 5

Каждый браузер возвращает разные значения для цветов. Но все-таки дать этому попытку:

function componentToHex(c) { 
var hex = c.toString(16); 
return hex.length == 1 ? "0" + hex : hex; 
} 

function rgbToHex(r, g, b) { 
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
} 

alert(rgbToHex(0, 51, 255)); 

попытаться сравнить после этого.