每次點擊都能改變背景 -有解無憂

我的問題是，當我點擊TR標簽時，它顯示一種顏色，當我再次點擊時，背景顏色就會消失，到目前為止還不錯。但是當我再次點擊時，顏色就不顯示了，問題出在哪里呢？

。

function getRandomColor() {
  var letters = '0123456789ABCDEF'/span>;
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16) ] 。
  }
  return color。
}
$('.tr').click（function() {
  $('.tr').css("background-color", "") 。
  $(this).css({
    "background-color": getRandomColor()
  });
  $(this).click(function(/span>) {
    $(this).css("background-color", "initial") 。
  });
})

<!DOCTYPE html>
<html lang="en"> 

<head>/span>
  <meta charset="utf-8">/span>
  < meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title></title> 
  <link rel=" stylesheet" href="css/style. css">
  < link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>> 
</head> 

<body> 
  <table class="table table-bordered table-hover w-99" >
    <tbody> 
      <tr class="tr"> 
        <td>/span>654</td>/span>
        <td></td>
        <td></td> 
        <td></td> 
        <td></td> 
      </tr>/span>
    </tbody>/span>
  </table>/span>
  <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>/span>
</body> 

</html>/span>

uj5u.com熱心網友回復：

剛剛洗掉了一點你的代碼，并添加了css user-select: none;以防止多次點擊后的文本選擇。

。

function getRandomColor() {
  var letters = '0123456789ABCDEF'/span>;
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16) ] 。
  }
  return color。
}
$('.tr').click(function() {
   console.log（getRandomColor()
  $('.tr').css("background-color", getRandomColor() )。
})

td {
 user-select: none;
}

<! DOCTYPE html> 
<html lang="en"/span>>

<head>/span>
  <meta charset="utf-8">/span>
  < meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title></title> 
  <link rel=" stylesheet" href="css/style. css">
  < link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>> 
</head> 

<body> 
  <table class="table table-bordered table-hover w-99" >
    <tbody> 
      <tr class="tr"> 
        <td>/span>654</td>/span>
        <td></td>
        <td></td> 
        <td></td> 
        <td></td> 
      </tr>/span>
    </tbody>/span>
  </table>/span>
  <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>/span>
</body> 

</html>/span>

提示：當背景太暗時，要注意將字體顏色切換為白色。也許有一個jQuery方法來檢測對比度。

uj5u.com熱心網友回復：

嵌套點擊事件通常是一個壞主意，因為它們往往不能像預期那樣作業。

在這種情況下，

 $(this).click(function() {
    $(this).css("background-color", "initial") 。
  });

這不是在替換初始的$(".tr").click，所以它們在第一次點擊后都會運行。

一個選擇是使用 .off("click") 并添加 other 處理程式，但是這有點混亂。

通常情況下，我建議使用toggleClass來設定你的背景，但是由于它是一個隨機的顏色，這不是一個選項。

然而，你仍然可以添加一個類（或者使用.data(..., ...)）來指示它是否需要重新設定：

。

function getRandomColor() {
  var letters = '0123456789ABCDEF'/span>;
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16) ] 。
  }
  return color。
}

$('.tr').click(function() {
  //清除行
  $('.tr')
  .css("background-color", " ")
    .not(this)
    .removeClass("隨機")。

  if (!$(this).hasClass("隨機") {
    $(this).css({
        "background-color": getRandomColor()
      })
      .addClass("隨機")。

  } else {
    $('.tr').removeClass("隨機")。
    //無需重置$(this).background-color，因為上面重置了。

  }
});

.隨機 {
  /* 這里沒有什么*/。
}

<script src="https://ajax. googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>/span>

<table class="table table-bordered table-hover w-99">/span>
  <tbody> 
    <tr class="tr"> 
      <td>/span>987</td>/span>
    </tr>/span>
    <tr class="tr"> 
      <td>/span>654</td>/span>
    </tr>/span>
    <tr class="tr"> 
      <td>/span>321</td>/span>
    </tr>/span>
  </tbody>/span>
</table>/span>

uj5u.com熱心網友回復：

你可以使用hasColor作為布林值來跟蹤狀態。

。

function getRandomColor() {
  var letters = '0123456789ABCDEF'/span>;
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16) ] 。
  }
  return color。
}

$('.tr').click(function() {
  var hasColor = $（this）.attr（'hasColor'）。
  if (!hasColor) {
    var hasColor = $(this).attr('hasColor', true) 。
    $(this).css({
      "background-color": getRandomColor()
    });
  } else {
    var hasColor = $(this).attr('hasColor', ' ')。
    $(this).css("background-color", " ")。
  }
})

<!DOCTYPE html>
<html lang="en"/span>>

<head>/span>
  <meta charset="utf-8">/span>
  < meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title></title> 
  <link rel=" stylesheet" href="css/style. css">
  < link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>> 
</head> 

<body> 
  <table class="table table-bordered table-hover w-99" >
    <tbody> 
      <tr class="tr"> 
        <td>/span>654</td>/span>
        <td></td>
        <td></td> 
        <td></td> 
        <td></td> 
      </tr>/span>
      <tr class="tr"> 
        <td>/span>654</td>/span>
        <td></td>
        <td></td> 
        <td></td> 
        <td></td> 
      </tr>/span>
    </tbody>/span>
  </table>/span>
  <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>/span>
</body> 

</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321659.html

標籤：

上一篇：如何在Supabase中使用單個API呼叫插入多個表

下一篇：如何在postgresql中將jsonb嵌套字串欄位轉換為int？