無法修復jQuery中div元素的背景顏色

-2

我希望我的div元素的顏色在用戶點擊後可以修復。但現在，即使用戶點擊它，它仍然會改變顏色。無法修復jQuery中div元素的背景顏色

這是我試過的代碼片段。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("div").on({ 
 
     mouseenter: function(){ 
 
      $(this).css("background-color", "lightgray"); 
 
     }, 
 
     mouseleave: function(){ 
 
      $(this).css("background-color", "lightblue"); 
 
     }, 
 
     click: function(){ 
 
      $(this).css("background-color", "Red"); 
 
     } 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<div>Some Comment Text</div> 
 
</body> 
 
</html>

來源

2017-04-25 Unknown_Coder

發生了什麼解釋更多！ –

當我點擊div元素背景顏色是紅色但後來的顏色會改變。你也可以運行代碼片段。 –

根據您的問題和意見，似乎要保持色彩點擊該分區後是紅色的。但是，再次點擊後，div將再次綁定到mouseenter和mouseleave事件。

如果這就是你想要的，你需要在點擊div時進行檢查，無論你需要bind這個事件還是unbind吧。

注：如果您使用JQuery有版本高於V1.7，它能夠更好地使用onoff，而不是bindunbind

function entering() { 
    $(this).css("background-color", "lightgray"); 
} 
function leaving() { 
    $(this).css("background-color", "lightblue"); 
} 
$(document).ready(function(){ 
    var isBind = true; 
    $('div').on('mouseenter',entering); 
    $('div').on('mouseleave',leaving); 
    $('div').on('click',function(){ 
      if (isBind) 
      { 
       $(this).css("background-color", "Red"); 
       $("div").off('mouseenter',entering); 
       $("div").off('mouseleave',leaving); 
       isBind = false; 
      } 
      else 
      { 
       $('div').on('mouseenter',entering); 
       $('div').on('mouseleave',leaving); 
       isBind = true; 
      } 
    }); 
});

工作的jsfiddle：https://jsfiddle.net/jkq2wfjz/

來源

2017-04-25 06:35:33 Mark

非常感謝@Mark。我忘了批准你對我有用的答案:) –

試試這個：

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $("div").on({ 
 
      mouseenter: function(){ 
 
       $(this).css("background-color", "lightgray"); 
 
      }, 
 
      mouseleave: function(){ 
 
       $(this).css("background-color", "lightblue"); 
 
      }, 
 
      click: function(){ 
 
       $(this).css("background-color", "Red"); 
 
       $("div").off(); 
 
       // As of jQuery 3.0, .unbind() has been deprecated 
 
      } 
 
     }); 
 
    }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div>Some Comment Text</div> 
 
    </body> 
 
    </html>

這裏$("div").off();用於解除綁定的所有事件偵聽器，以便任何情況下，再次觸發。

來源

2017-04-25 06:07:01

這只是第一次點擊工作。當我再次點擊時，顏色將與您的答案相同。 –

沒有找到你？ –

顯然不是兄弟。謝謝你的嘗試。 –

將您的jQuery腳本更改爲以下，它將工作。

$(document).ready(function(){ 
$("div").on({ 
    mouseenter: function(){ 
     var current_color = $(this).css("background-color"); 
     if(current_color != 'rgb(255, 0, 0)'){ 
      $(this).css("background-color", "lightgray"); 
     } 
    }, 
    mouseleave: function(){ 
     var current_color = $(this).css("background-color"); 
     if(current_color != 'rgb(255, 0, 0)'){ 
      $(this).css("background-color", "lightblue"); 
     } 
    }, 
    click: function(){ 
     $(this).css("background-color", "Red"); 
    } 
}); 
});

讓我知道它是否工作！

來源

2017-04-25 06:08:58

是的，但它只適用於第一次點擊。之後，顏色如果不改變的話。 –

如果要在點擊後維護div背景色..顯然你的代碼不正確。您需要維護或存儲div的狀態，如布爾標誌或其他技術。

如下所示，您可以使用data-attribute在HTML中完成您的任務。

$(document).ready(function(){ 
 
    $("div").on({ 
 
     mouseenter: function(){ 
 
      if($(this).attr('data-isclicked')=="false") 
 
      { 
 
       $(this).css("background-color", "lightgray"); 
 
      } 
 
     }, 
 
     mouseleave: function(){ 
 
      if($(this).attr('data-isclicked')=="false") 
 
      { 
 
       $(this).css("background-color", "lightblue"); 
 
      } 
 
      
 
     }, 
 
     click: function(){ 
 
      $(this).attr('data-isclicked','true'); 
 
      $(this).css("background-color", "Red"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div data-isclicked='false'>1 Some Comment Text</div> 
 
<div data-isclicked='false'>2 Some Comment Text</div> 
 
<div data-isclicked='false'>3 Some Comment Text</div> 
 
<div data-isclicked='false'>4 Some Comment Text</div>

來源

2017-04-25 06:09:18 prog1011

試試這個

click: function(){ 
    $(this).css("background-color", "Red"); 
    $(this).mouseleave(function(){ 
     $(this).css("background-color", "Red"); 
    }); 
}

來源

2017-04-25 06:11:02

感謝您的嘗試。 –

無法修復jQuery中div元素的背景顏色

回答

相關問題