Question

我在这里找到了一个我发现的小脚本，并用它创建了一个简单的游戏......

/*
 Here add:
    'image_path': ['id_elm1', 'id_elm2']
 "id_elm1" is the ID of the tag where the image is initially displayed
 "id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
  'http://www.notreble.com/buzz/wp-content/uploads/2011/12/les-claypool-200x200.jpg': ['lesto', 'les'],
  'http://rs902.pbsrc.com/albums/ac223/walkingdeadheartbreaker/Muzak/Guitarists/LarryLalondePrimus.jpg~c200': ['lerto', 'ler'],
  'http://www.noise11.com/wp/wp-content/uploads/2014/07/Primus-Alexander-200x200.jpg': ['timto', 'tim']
};

// function executed when click to move the image into the other tag
function whenAddImg() {
  /* Here you can add a code to be executed when the images is added in the other tag */
  return true;
}

         /* From here no need to edit */

// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
 // http://coursesweb.net/javascript/
  // put the image in element with ID from "ide"
  obaImg.putImg = function(img, ide, stl) {
    if(document.getElementById(ide)) {
      document.getElementById(ide).innerHTML = '<img src="'+ img+ '" '+stl+' />';
    }
  }

  // empty the element with ID from "elmid", add image in the other element associated to "img"
  obaImg.alternateImg = function(elmid) {
    var img = obaImg.storeim[elmid];
    var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
    $('#'+elmid+ ' img').hide(800, function(){
      $('#'+elmid).html('');
      obaImg.putImg(img, addimg, 'style="display:none;"');
      $('#'+addimg+ ' img').fadeIn(500);
    });

    // function executed after the image is moved into "addimg"
    whenAddImg();
  }
  obaImg.storeim = {};            // store /associate id_elm: image

  // add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
  // add the image in the first tag associated to image
  // register 'onclick' to each element associated with images in "obimids"
  obaImg.regOnclick = function() {
    for(var im in obimids) {
      obaImg.storeim[obimids[im][0]] = im;
      obaImg.storeim[obimids[im][2]] = im;
      obaImg.putImg(im, obimids[im][0], '');
      document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
      document.getElementById(obimids[im][3]).onclick = function(){ obaImg.alternateImg(this.id); };
    }
  }
obaImg.regOnclick();       // to execute regOnclick()

FIDDLE

单击项目时，如果用户导航到另一个页面，则会将它们添加到我希望存储的容器中。我在另一个脚本上看到了一些本地存储cookie代码

FIDDLE

var $chks = $('.compare').change(function () {
    console.log('c', this)
    if ($(this).is(':checked')) {
        var img = $('<img>'),
            findimg = $(this).closest('.box').find('img'),
            data_term = findimg.data('term');
        img.attr('src', findimg.attr('src'));
        img.attr('data-term', data_term);
        var input = '<input type="hidden" name="imagecompare" value="' + data_term + '">';
        $('#area').find('div:empty:first').append(img).append(input);
    } else {
        var term = $(this).data('term'),
            findboximage = $('#area > div > img[data-term=' + term + ']')
            findboximage.parent('div').empty();
    }

    localStorage.setItem("imagecookie", $chks.filter(':checked').map(function () {
        return $(this).data('term')
    }).get().join(','));

});

$(document).on('click', '#area > div', function () {
    $(this).empty();
    localStorage.clear();
});

var cookie = localStorage.getItem("imagecookie");
if (cookie) {
    var terms = cookie.split(',');
    if (terms.length) {
        $chks.filter($.map(terms, function (val) {
            return '[data-term="' + val + '"]'
        }).join()).prop('checked', true).change();
    }
}

但无法确定如何应用类似于此的东西。我将不胜感激，或者指出一些有用的帮助地点。

用于页面的JavaScript本地存储

0 个答案: