第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何使用 LocalStorage 保存為按鈕選擇的背景顏色?

如何使用 LocalStorage 保存為按鈕選擇的背景顏色?

牛魔王的故事 2022-05-26 14:27:20
問(wèn)題是我不知道如何使用 LocalStorage 為按鈕保存選擇的背景顏色。我以前從未使用過(guò) LocalStorage,但我對(duì)代碼的想法是以某種方式使用 myFunction(color),它利用了 onclick 函數(shù)中的顏色值。任何幫助,將不勝感激!$("[data-toggle=popover]").popover({    html: true,    sanitize: false,    trigger: 'focus',    content: function()    {      return $('#popover-content').html();    }  });  let targetBtn;  document.querySelectorAll('.myBtn').forEach((item) =>  {    item.addEventListener('click', (e) =>    {      targetBtn = e.target;    })  })  function myFunction(color)  {    if (targetBtn)    {      targetBtn.style.background = color;      /* Here I somehow want to use localStorage         to save the picked colors for the buttons          localStorage.setItem('targetBtn', color); */    }  }<head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><button class="myBtn myBtnCorners1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>      <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">2</button>  <div id="popover-content" class="hide">    <button class="demo1" onclick="myFunction('red')">Red</button>    <button class="demo2" onclick="myFunction('green')">Green</button>    <button class="demo3" onclick="myFunction('blue')">Blue</button>    <span class="close">&times;</span>  </div> </body>
查看完整描述

3 回答

?
茅侃侃

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個(gè)贊

無(wú)法在代碼段中進(jìn)行測(cè)試,但代碼應(yīng)該很好。


您將需要一個(gè) Getter 和一個(gè) Setter。擁有它們后,您可以獲取、設(shè)置或加載所有首選項(xiàng)。


var getColorPref = (i) => {

  return localStorage.getItem("color-" + i) || "";

}


var saveColorPref = (i, c) => {

  localStorage.setItem("color-" + i, c);

  return c;

}


var loadColorPrefs = () => {

  $(".myBtn").each(() => {

    var i = $(this).index();

    $(this).css("background", getColorPref(i));

  });

}


loadColorPrefs();


var targetBtn;


function setColor(c) {

  var i = $(targetBtn).index();

  console.log(i, c);

  $(targetBtn).css("background", saveColorPref(i, c));

}


$("[data-toggle=popover]").popover({

  html: true,

  sanitize: false,

  trigger: 'focus',

  content: function() {

    return $('#popover-content').html();

  }

});


$('.myBtn').each((i, item) => {

  $(item).click((e) => {

    targetBtn = e.target;

  });

});

.popover-content {

  display: flex;

  justify-content: space-around;

  align-items: center;

  background: #efefef;

  width: 230px;

  height: 80px;

}


.close {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

  position: absolute;

  top: 0px;

  left: 210px;

}


.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

  transition: 0.5s;

}


.myBtn {

  background-color: #DCDCDC;

  border: 0.5px solid #808080;

  color: white;

  width: 30px;

  height: 30px;

  border-radius: 6%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}


.demo1 {

  background-color: red;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}


.demo2 {

  background-color: green;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}


.demo3 {

  background-color: blue;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}


.hide {

  display: none;

}

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>


<body>

  <button class="myBtn myBtnCorners1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>

  <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">2</button>

  <div id="popover-content" class="hide">

    <button class="demo1" onClick="setColor('red')">Red</button>

    <button class="demo2" onClick="setColor('green')">Green</button>

    <button class="demo3" onClick="setColor('blue')">Blue</button>

    <span class="close">&times;</span>

  </div>

</body>


查看完整回答
反對(duì) 回復(fù) 2022-05-26
?
BIG陽(yáng)

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

OP 明確詢問(wèn)有關(guān)保存到 localStorage 的問(wèn)題,因此 Leira Sánchez 的回答是正確的。我相信 OP 也在詢問(wèn)從 localStorage 獲取數(shù)據(jù),所以我會(huì)詳細(xì)說(shuō)明。


我建議向您的 HTML 按鈕添加 id 以明確保存顏色:


<button id="myBtn1" class="myBtn myBtnCorners1" ...>1</button>

<button id="myBtn2" class="myBtn"...>2</button>


myFunction()現(xiàn)在應(yīng)該能夠獲取targetBtn.id,并且您將保存到 localStorage 中,如下所示:


function myFunction(color) {

  if (targetBtn) {

    targetBtn.style.background = color;

    localStorage.setItem(targetBtn.id, color);

  }

}

然后在您的 document.getQuerySelector 中,您可以從 localStorage 獲取項(xiàng)目并應(yīng)用樣式


  document.querySelectorAll('.myBtn').forEach((item) => {

    const id = $(item).attr("id")

    $(item).css("background-color", localStorage.getItem(id));


    item.addEventListener('click', (e) => {

      targetBtn = e.target;

    })

  })


查看完整回答
反對(duì) 回復(fù) 2022-05-26
?
三國(guó)紛爭(zhēng)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以通過(guò)以下方式將某些內(nèi)容保存到本地存儲(chǔ):

localStorage.setItem('whatever you wanna save goes here');

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage


查看完整回答
反對(duì) 回復(fù) 2022-05-26
  • 3 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)