admin管理员组

文章数量:1404927

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, acpanied by localStorage. Can someone help me to fix this?

function onClickAvGamesCheckBox() {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
  var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(".avclone :checkbox").change(function() {
  var name = $(this).closest("div").attr("name");
  if (this.checked)
    $(".columns[name=" + name + "]").clone().appendTo("#favorite");
  else
    $("#favorite .columns[name=" + name + "]").remove();
});
* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url(".png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url(".png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src=".12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="/" data-path><img src=".jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>

  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="/" data-path><img src=".jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>

</div>
<div id="favorite"></div>

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, acpanied by localStorage. Can someone help me to fix this?

function onClickAvGamesCheckBox() {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
  var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(".avclone :checkbox").change(function() {
  var name = $(this).closest("div").attr("name");
  if (this.checked)
    $(".columns[name=" + name + "]").clone().appendTo("#favorite");
  else
    $("#favorite .columns[name=" + name + "]").remove();
});
* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>

  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>

</div>
<div id="favorite"></div>

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, acpanied by localStorage. Can someone help me to fix this?

  • javascript
  • jquery
  • html
  • css
  • local-storage
Share Improve this question edited Dec 19, 2018 at 11:22 Mark Schultheiss 34.2k12 gold badges72 silver badges113 bronze badges asked Dec 13, 2018 at 4:04 LeoLeo 3152 gold badges7 silver badges28 bronze badges 6
  • This code appears to work properly: jsfiddle/Twisty/mch7Lxr3/3 I do not see where #favorite is located in HTML. – Twisty Commented Dec 19, 2018 at 7:02
  • thank you very mouch for your help, so if you add the <div id="favorite"></div> bottom you see when you click uncheck on clones div is not working correct. – Leo Commented Dec 19, 2018 at 7:47
  • that what I want to do is when I uncheck from copy div, that need to remove the corect div (not others) and uncheck the original div – Leo Commented Dec 19, 2018 at 7:49
  • just curious why still using jQuery ? why not React or simple ES6 with web ponents – STEEL Commented Dec 20, 2018 at 13:22
  • @STEEL if you have any code or any idea, please show me! Thank you. – Leo Commented Dec 20, 2018 at 13:29
 |  Show 1 more ment

3 Answers 3

Reset to default 6 +50

You have a click handler, so we wire that up to do the storage (will not work here due to sandbox), we also can use data and filter by that, adding an index to each columns container to use to filter the cloned items so we can target them and remove no matter which one is added first.

Here is a fiddle with custom event and slightly more plex storage example: https://jsfiddle/MarkSchultheiss/5Luyn18j/47/ done as a fiddle to avoid the sandbox on SO.

Original:

//borrow some code from https://stackoverflow./a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

function onClickAvGamesCheckBox(event) {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  // localStorage.setItem("checked", JSON.stringify(arr));
}

$(function() {
  //add some data
  $('.AvGamesCheckBox').each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  // replace [] with the mented out for real stuff
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").trigger("change");
});

//* Clone script
$(".avclone").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length)
    checkContainer.clone(true).appendTo("#favorite");
  else
    matcher.remove();
}).on('click', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite" ></div>

Addition of the click on the clone: EDIT: added custom event and ment on how to modify for real use

//borrow some code from https://stackoverflow./a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

function onClickAvGamesCheckBox(event) {
  var arr = $(".avclone").find('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  //EDIT: un-ment for real use
  // localStorage.setItem("checked", JSON.stringify(arr));
}

$(function() {
  //add some data
  var checks = $(".avclone").find('.AvGamesCheckBox');
  checks.each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  //EDIT replace []; with mented out code for real use
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    checks.eq(i).prop('checked', checked);
  });
  //checks.trigger("change");
});

//* Clone script
$(".avclone, #favorite").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length) {
    checkContainer.clone(true).appendTo("#favorite");
  } else {
    $(".avclone").find('.AvGamesCheckBox')
         .eq(checkIndex).trigger('clickcustom');
    matcher.remove();
  }
});
$(".avclone").on('click clickcustom', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite"></div>

This should work for you. Note: avoid using camelcase classes or ids. Also relying on elements indexes it's not a good idea I would use some sort of identifier to track elements relations.

JS:

function onClickAvGamesCheckBox() {
    var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
    var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {

  $('.AvGamesCheckBox').eq(i).prop('checked', checked).trigger("change");
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(document).on("change", ".avclone [type='checkbox']", function(e){ 
var column = $(e.target).closest(".column"),
    eq = column.index();
if ($(e.target).prop("checked"))
    column.clone().attr("data-eq", eq).appendTo("#favorite");
else
    $("#favorite .column[data-eq='"+eq+"']").remove();
});

CSS:

* {
  box-sizing: border-box;
  padding: 5px;
}
.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}
.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
  z-index: 5;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.AvGamesContainer:hover input ~ .AvGamesCheckmark {
  background-color: #fff;
}
.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark:after {
  display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}
img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}
img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -webkit-filter: saturate(150%);
}
.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}
.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

#favorite .column .AvGamesCheckmark {
  display: none!important
}

HTML: 

<div class="avclone"> 
<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label> 
<a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
</div>
</div>

<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer1" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
<a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
  </div>
</div> 

</div>

<div id="favorite"></div>

@Leo since you asked how to do this in React. DEMO: https://react-krwy1w.stackblitz.io/

CODE: https://stackblitz./edit/react-krwy1w?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

const GAME_IMAGES = [
  {
    title: "some title 01",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 02",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 03",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
];


const GameCard = ({title, href, img, onChange}) => {
  return (
    <div className="column">
      <div className="columns">
        <label className="AvGamesContainer">
          <input type="checkbox" name="AvGamesContainer" className="AvGamesCheckBox" onChange={(e) => onChange(e.target.checked, {title, href, img})}/>
          <span className ="AvGamesCheckmark"></span>
        </label>
          <a href={href}>
            <img src={img} title={title}/>
          </a>
      </div>
    </div>
  );
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      display: null
    }
  }

  handleChange(isChecked, obj) {
    this.setState({
        display: isChecked ? obj : null
      });
  }

  render() {
    return (
      <div>
        {
          this.state.display !== null ?
            <div id="favorite">
          {<GameCard {...this.state.display} />}
        </div> : null
        }

        <p>
          Start editing to see some magic happen :)
        </p>
        {
          GAME_IMAGES.map(prop => <GameCard {...prop} onChange={this.handleChange.bind(this)} />)
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

本文标签： jqueryJavascript on checked box clone this divon unchecked remove this divStack Overflow

版权声明：本文标题：jquery - Javascript on checked box clone this div, on unchecked remove this div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744866898a2629396.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。