Markus :
I simply want to change the background-color of the buttons using the ID instead of index because of maintaining purposes. Any suggestion how this could be done?
Run the code from jsfiddle: https://jsfiddle.net/p6kuf0zv/4/
or look the code at the code-snippet:
// On click on a button, a popover menu will show up
$("[data-toggle=popover]").popover({
html: true,
sanitize: false,
trigger: 'focus',
content: function() {
return $('#popover-content').html();
}
});
// Creates data items inside local storage with keyName and keyValue
var saveColorPref = (keyName, keyValue) => {
localStorage.setItem(keyName, keyValue);
return keyValue;
}
// Retrieves data items from local storage
var getColorPref = (keyName) => {
return localStorage.getItem(keyName);
}
// How can the code bellow be changed to make use of ID instead of index?
var targetBtn;
function setColor(keyValue) {
var keyName = $(targetBtn).index();
console.log(keyName, keyValue);
$(targetBtn).css("background", saveColorPref(keyName, keyValue));
}
$('.myBtn').each((keyName, item) => {
$(item).click((e) => {
targetBtn = e.target;
});
});.demo1{
background-color: red;
}
.demo2{
background-color: green;
}
.demo3{
background-color: blue;
}<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" id="1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
<button class="myBtn" id="2" 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">×</span>
</div>
</body>Rob Moll :
In response to:
How can buttons be targeted using id instead of index?
Change the setColor function as shown below:
Before:
function setColor(keyValue) {
var keyName = $(targetBtn).index();
console.log(keyName, keyValue);
$(targetBtn).css("background", saveColorPref(keyName, keyValue));
}
After:
function setColor(keyValue) {
var keyName = $(targetBtn).attr('id');
console.log(keyName, keyValue);
$(targetBtn).css("background", saveColorPref(keyName, keyValue));
}
The SO snippet is throwing this error:
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
So you don't see the button color change. This works in your jsfiddle though.
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=405825&siteId=1