Question

我已经保存了localStorage中点击的div的html内容的代码，同时点击了“已保存的事件”＆＃39;按钮将其附加到#result div。我的挑战是在附加之前检查并查看#result中是否已存在对象，否则每次用户单击该按钮时，它都会再次向div添加所有内容。

这里是代码

$(document).ready(function(){
    $(".selctor").click(function () {
        var i=$(this).attr("rel");
        console.log(i);
        var eventsArray=document.getElementsByClassName("eventer");
        eventSelctd=(eventsArray[i]).outerHTML;

        if (typeof(Storage) != "undefined") {
             localStorage.setItem("schedule "+ i, eventSelctd);
        }
        else {
        document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
    });

    $("#buttn1").click(function () {
    var storaged = Object.keys(localStorage);
    var storageLength = storaged.length;

    for (var i=0; i<storageLength; i++ )
      {
      var key = localStorage.key(i);
      var value = localStorage[key];                

       $("#result").each( function() { 
       var resultRel = $("#result.eventer").attr(rel);
          if ((resultRel) != value) {
          $("#result").append(value);
          }
       });
      }

    });
});

Answer 1

见这里。

$("#result").each( function() { 
    var resultRel = $("#result.eventer").attr(rel);
    if ((resultRel) != value) {
        $("#result").append(value);
    }
});

#result.eventer表示标识为result且也具有类名eventer的元素。我认为您认为#result .eventer表示.eventer中的元素#result。
$("#result").each没用。 .each会抛出#result而不是其中的孩子。
$("#result .eventer").attr("rel")是第一个 #result .eventer元素的rel属性。变量rel似乎尚未定义。

所以这是我的代码。

$("#buttn1").click(function () {
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
var resultEventer = $("#result .eventer");

    for (var i=0; i<storageLength; i++)
    {
        var el = $(localStorage[storaged[i]]); // localStorage.key(i) == storaged[i]
        if (resultEventer.filter("[rel='" + el.attr("rel") + "']").length == 0) {
            $("#result").append(el);
        }
    }
});

.filter("[rel='rel value']")表示找到属性rel为'rel value'的元素。我将value包裹在$之前，因为我需要value的{{1}}属性。

是rel唯一属性吗？

Answer 2

我想我得到了你要求的东西。

这是工作fiddle。

当用户点击已存在于本地存储中的事件时，我不允许他们再次添加，不允许本地存储中的倍数。如果已清除本地存储，则不会检查倍数。
将保存的事件添加到#results div时，我会检查事件是否已存在。我通过将密钥设置为rel属性而不是“存储”来完成此操作。
请参阅我的代码评论，随时询问您需要的任何说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.eventer { 
background-color:#9CB2B7; 
padding: 15px; width: 150px; 
height: auto; margin:0; color: #fff; 
letter-spacing:0.7px;
}
.selctor {
background-color: #A0AABA;
width: 180px;
}
a {
display: block;
text-decoration: none;
color: #fff;
letter-spacing: 0.7px;
text-align: center;
font-weight: normal;
padding: 5px;
}
#result{
outline: dotted 2px red;
padding-bottom: 150px;
width: 50%;
}
#buttn1 {
float: left;
}
#buttn2 {
float: left;
}
</style>
</head>
<body>
<div>
<div class="eventer" rel="0"><strong>Event 1 Saturday</strong><br />
yakedi yak</div>
<p class="selctor" rel="0"><a href="#">Add to Schedule</a></p>
</div>

<div>
<div class="eventer" rel="1"><strong>Event 2 Saturday</strong><br />
more yakedi yak</div>
<p class="selctor" rel="1"><a href="#">Add to Schedule</a></p>
 </div>

<div>
<div class="eventer" rel="2"><strong>Event 3 Sunday</strong><br />
new yakedi yak</div>
<p class="selctor" rel="2"><a href="#">Add to Schedule</a></p>
</div>

<div>
<div class="eventer" rel="3"><strong>Event 4 Sunday</strong>
blah blah dooodah</div>
<p class="selctor" rel="3"><a href="#">Add to Schedule</a></p>
</div>

<input type="submit" id="buttn1" value="Saved Events"><br /><br />
<input type="submit" id="buttn2" value="Remove Events"><br /><br />

<div>Selected Events are:<br />
<div id="result"></div>      
</div>


<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    // get events
    var events = document.getElementsByClassName("eventer");

    var checkChildrenForMultiples = function(target, elements) {
        // if results has elements, look for events to already be added
        if(elements) {
            for (var i = 0; i < elements.length; i++) {
                if( $(elements[i]).attr('rel').toString() === target) {
                    return true;
                }
            };
        }

        // event is NOT already in the result div
        return false;
    }

    // Click selector button
    $(".selctor").click(function (e) {
        e.preventDefault();
        // save the rel attribute as the key
        var key = $(this).attr("rel");

        // save the html for the event selected based on rel
        var eventSelctd = (events[key]).outerHTML;

        // check if localStorage exists for browser and if the event HAS NOT yet been saved
        if(Storage !== undefined && localStorage[key] === undefined) {
            // save key is rel attribute, value is html
            localStorage.setItem(key, eventSelctd);
        } else if (localStorage.key) {
            console.log('Event already saved.');
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
    });

    // click on button to show saved events
    $("#buttn1").click(function (e) {
        e.preventDefault();

        // save local storage keys as array
        var storedEvents = Object.keys(localStorage);
        var storageLength = storedEvents.length;

        for (var i = 0; i < storageLength; i++) {
            var key = storedEvents[i];
            var value = localStorage[key];

            // if event is not in results div
            if( checkChildrenForMultiples(key, $('#result').children()) === false) {
                // add the event to the div
                $('#result').append(value);
            }
        }

        localStorage.clear();
    });

    // clear local storage
    $("#buttn2").click(function(e){
        e.preventDefault();
        localStorage.clear();
        $("#result").html('');
        console.log("Storage is cleared");
    });
});
</script>
</body>
</html>

Answer 3

我将如何做到这一点：

Working jsfiddle

$(document).ready(function(){

    $(".selctor").click(function () {
        //get index of clicked div 
        var i = $('.selctor').index($(this)); 

        //use that to get the outerHTML of the matching eventer div
        //this needs `jQuery.fn.outerHTML` down at the bottom to work
        var eventSelctd = $('.eventer:eq('+ i +')' ).outerHTML(); 

        if (typeof(Storage) != 'undefined') {
            //check if we aready have some events saved
            if(localStorage.getItem('myEvents')){
                //if so get them as an array
               var myEvents = JSON.parse(localStorage['myEvents']);

                //make sure the current `eventSelctd` is not already in our array
               if($.inArray(eventSelctd, myEvents ) == -1){
                   //if not add it to the array then update `localStorage["myEvents"] `
                   myEvents.push( eventSelctd  );
                   localStorage["myEvents"] = JSON.stringify( myEvents );
               }
               else{
                   //warn that this event is already selected
                    alert('event is already in storage');
               }

            }
            else{
                //if no `myEvents` exists in localStorage, create it as an array holding just the current `eventSelctd`
                localStorage["myEvents"] = JSON.stringify( [ eventSelctd  ] )
            }
        }
        else {
             document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
    });

    $("#buttn1").click(function () {
        //get the stored events
        var myRetrievedEvents = JSON.parse(localStorage['myEvents']);
        $("#result").html(''); //added this to clear the div before adding events
        //loop through the events appending each to the results div
        $(myRetrievedEvents).each(function(index, element){

            $("#result").append(element);

        });

    });

    $("#buttn2").click(function(){
        localStorage.clear();
    $("#result").html('');
       console.log("Storage is cleared");
    });
});

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

检查现有对象javascript或jquery

3 个答案: