0

私の問題は、同じ js ファイルを別の名前で使用していることです。両方のファイルの機能は同じです。最初の js ファイルは 5 つの画像 (白黒) をスライドさせ、もう 1 つの js ファイルは同じページの異なるリンクで 2 つの画像 (色付き) のみをスライドさせます。ただし、どちらも適切に機能していないということは、白黒画像用のスライダーが機能している場合、カラー画像用のもう 1 つのスライダーが機能していないということです。私を助けてください。

Js は、coverflow-color.js という名前のスクリプト ファイルで参照されます。

var min = 1; //minimum number of image
var max = 3; //maximum number of images
var current = 2; //image number that is at the center of the coverflow
var currPos = 0; //custom attribute that stores current TranslateX position of each image
var newPos = 0; //custom attribute that stores new TranslateX position of each image, i.e after movement
var currAngle = 0; //custom attribute that stores current RotationY angle of each image
var newAngle = 0; //custom attribute that stores new RotationY angle of each image
var gap = 75;
var clickedIndex = 0; //index of the image tapped
var isMouseDown = false; //has the user interacted
var swipeStartX = 0;
var swipeDistanceX = 0;
var diff = 0;
var imageTapStartX = 0;
var imageTapEndX = 0;
var imageTapDistanceX= 0;
var coverFlowContainerElement = null;
var thresholdDistanceSingleSlide = 0; //this measures the distance

window.addEventListener("load",function(){
    /* Hide the browser address bar. This will give a native feel to the app */
    setTimeout(function() { window.scrollTo(0, 1); }, 20);

    /* Get the pointer to the coverflow holder */
    coverFlowContainerElement = document.getElementById("coverflow");
    moveImagesFromRight();  //help comments are there in the function definition
    addEventsToImageHolders(); //help comments are there in the function definition
    addEventToCoverflowHolder(); //help comments are there in the function definition

    thresholdDistanceSingleSlide = parseInt(300 / max);
    disablePageScroll();  //help comments are there in the function definition
},false);

/*
    Give the initial thrust to the slides from the right. I have just given it an effect of the images being
    thrown into the center from the right.
*/
function moveImagesFromRight()
{
    setTimeout(function() {
      document.getElementById("fig1").style.webkitTransform = "translateX(-150px) rotateY(30deg)";
      document.getElementById("fig2").style.webkitTransform = "translateX(0px) rotateY(0deg) translateZ(200px)";
      document.getElementById("fig3").style.webkitTransform = "translateX(150px) rotateY(-30deg)";
    }, 150);
}

/* Register touch event listener to the image holders i.e the <div> holding each images */
function addEventsToImageHolders()
{
    var imageHolders = coverFlowContainerElement.getElementsByTagName("div");
    for(var i=0;i<imageHolders.length;i++)
    {
        //console.log(imageHolders[i]);
        imageHolders[i].addEventListener("touchstart",handleImageTapStart,false);
        imageHolders[i].addEventListener("touchend",handleImageTapEnd,false);
    }
}

/*
    Add touch events to the <div id='coverflow' /> container. So the container registers the finger movements
    and acts accordingly
*/
function addEventToCoverflowHolder()
{
    coverFlowContainerElement.addEventListener("touchstart", handleFingerSwipeStart, false);
    coverFlowContainerElement.addEventListener("touchmove", handleFingerSwipeMove, false);
    coverFlowContainerElement.addEventListener("touchend", handleFingerSwipeEnd, false);
}

/* The default behavior of the browser is to scroll when you swipe. This line is to prevent scrolling */
function disablePageScroll() {
  document.ontouchmove = function(event) {
      event.preventDefault();
  }
}

/* Events for the <div id='coverflow'></div> holder */
function handleFingerSwipeStart(event) {
  isMouseDown = true;
  swipeStartX = event.changedTouches[0].pageX;
  event.preventDefault();
}
function handleFingerSwipeMove(event) {
  if (isMouseDown) {
      swipeDistanceX = parseInt(event.changedTouches[0].pageX - swipeStartX);//

      var netDistance = Math.abs(swipeDistanceX);
      //console.log("Move: " + swipeDistanceX + " Net distance: " + netDistance); //changedTouches[0].
      if (netDistance >= thresholdDistanceSingleSlide) {
          //console.log(thresholdDistanceSingleSlide + " covered");
          if (swipeDistanceX < 0) {
              right();
              swipeStartX = event.changedTouches[0].pageX;
          }
          else {
              left();
              swipeStartX = event.changedTouches[0].pageX;
          }
      }
  }
}
function handleFingerSwipeEnd(event) {
  if (isMouseDown) {
      isMouseDown = false;
      swipeStartX = 0;
  }
}

/*
    Events for the <div id="fig"></div> elements where fig starts from 1 to 7. The images are
    inside these element
*/
function handleImageTapStart(event) {
    imageTapStartX = event.changedTouches[0].pageX;
}
function handleImageTapEnd(event) {
    imageTapEndX = event.changedTouches[0].pageX;
    imageTapDistanceX = imageTapEndX - imageTapStartX;
    var targetObj = event.currentTarget;
    if (imageTapDistanceX == 0) {
      clickedIndex = parseInt(targetObj.id.slice(3, 4));
      if (clickedIndex > current) {
          //move right to the clicked index
          diff = clickedIndex - current;
          for (var i = 1; i <= diff; i++) {
              right();
          }
      }
      else if (clickedIndex < current) {
          //move left to the clicked index
          diff = (current - clickedIndex);
          for (var i = 1; i <= diff; i++) {
              left();
          }
      }
      else {
          //same element is clicked....do nothing
          //alert(clickedIndex);
          document.getElementById("coverflow").style.display="none";
          document.getElementById("fig"+clickedIndex+"_content").style.display="block";
      }
    }
}

/* Functions - left() & right() for actually moving the images when user interacts*/
/* Move an image from L -> R i.e you are swiping from L->R across the screen */
function left() {
  if (current > min) {
      current--;

      for (var i = 1; i <= max; i++) {
          currPos = document.getElementById("fig" + i).getAttribute("cp");
          currAngle = document.getElementById("fig" + i).getAttribute("a");
          if (currPos == "-150" || currPos == "0") {
              newPos = parseInt(currPos) + (gap * 2) * (1);
              if (currPos == "0") {
                  newAngle = -30;
              }
              else if (currPos = "-150") {
                  newAngle = 0;
              }
              else {
              }
          }
          else {
              newPos = parseInt(currPos) + (gap) * (1);
              newAngle = parseInt(currAngle);
          }
          if (i == current) {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
          }
          else {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
          }
          document.getElementById("fig" + i).setAttribute("cp", newPos);
          document.getElementById("fig" + i).setAttribute("a", newAngle);
      }
  }
}
/* Move an image from R -> L i.e you are swiping from R->L across the screen */
function right() {
  if (current < max) {
      current++;

      for (var i = 1; i <= max; i++) {
          currPos = document.getElementById("fig" + i).getAttribute("cp");
          currAngle = document.getElementById("fig" + i).getAttribute("a");
          if (currPos == "150" || currPos == "0") {
              newPos = parseInt(currPos) + (gap * 2) * (-1);
              if (currPos == "0") {
                  newAngle = 30;
              }
              else if (currPos = "150") {
                  newAngle = 0;
              }
              else {
              }
          }
          else {
              newPos = parseInt(currPos) + (gap) * (-1);
              newAngle = parseInt(currAngle);
          }
          if (i == current) {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
          }
          else {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
          }
          document.getElementById("fig" + i).setAttribute("cp", newPos);
          document.getElementById("fig" + i).setAttribute("a", newAngle);
      }
  }
}

他の J は、coverflow-type.js という名前のスクリプト ファイルで参照されます。

var min = 1; //minimum number of image
var max = 5; //maximum number of images
var current = 3; //image number that is at the center of the coverflow
var currPos = 0; //custom attribute that stores current TranslateX position of each image
var newPos = 0; //custom attribute that stores new TranslateX position of each image, i.e after movement
var currAngle = 0; //custom attribute that stores current RotationY angle of each image
var newAngle = 0; //custom attribute that stores new RotationY angle of each image
var gap = 75;
var clickedIndex = 0; //index of the image tapped
var isMouseDown = false; //has the user interacted
var swipeStartX = 0;
var swipeDistanceX = 0;
var diff = 0;
var imageTapStartX = 0;
var imageTapEndX = 0;
var imageTapDistanceX= 0;
var coverFlowContainerElement = null;
var thresholdDistanceSingleSlide = 0; //this measures the distance

window.addEventListener("load",function(){
    /* Hide the browser address bar. This will give a native feel to the app */
    setTimeout(function() { window.scrollTo(0, 1); }, 20);

    /* Get the pointer to the coverflow holder */
    coverFlowContainerElement = document.getElementById("coverflow");
    moveImagesFromRight();  //help comments are there in the function definition
    addEventsToImageHolders(); //help comments are there in the function definition
    addEventToCoverflowHolder(); //help comments are there in the function definition

    thresholdDistanceSingleSlide = parseInt(300 / max);
    disablePageScroll();  //help comments are there in the function definition
},false);

/*
    Give the initial thrust to the slides from the right. I have just given it an effect of the images being
    thrown into the center from the right.
*/
function moveImagesFromRight()
{
    setTimeout(function() {
      document.getElementById("fig1").style.webkitTransform = "translateX(-225px) rotateY(30deg)";
      document.getElementById("fig2").style.webkitTransform = "translateX(-150px) rotateY(30deg)";
      document.getElementById("fig3").style.webkitTransform = "translateX(0px) rotateY(0deg) translateZ(200px)";
      document.getElementById("fig4").style.webkitTransform = "translateX(150px) rotateY(-30deg)";
      document.getElementById("fig5").style.webkitTransform = "translateX(225px) rotateY(-30deg)";
    }, 150);
}

/* Register touch event listener to the image holders i.e the <div> holding each images */
function addEventsToImageHolders()
{
    var imageHolders = coverFlowContainerElement.getElementsByTagName("div");
    for(var i=0;i<imageHolders.length;i++)
    {
        //console.log(imageHolders[i]);
        imageHolders[i].addEventListener("touchstart",handleImageTapStart,false);
        imageHolders[i].addEventListener("touchend",handleImageTapEnd,false);
    }
}

/*
    Add touch events to the <div id='coverflow' /> container. So the container registers the finger movements
    and acts accordingly
*/
function addEventToCoverflowHolder()
{
    coverFlowContainerElement.addEventListener("touchstart", handleFingerSwipeStart, false);
    coverFlowContainerElement.addEventListener("touchmove", handleFingerSwipeMove, false);
    coverFlowContainerElement.addEventListener("touchend", handleFingerSwipeEnd, false);
}

/* The default behavior of the browser is to scroll when you swipe. This line is to prevent scrolling */
function disablePageScroll() {
  document.ontouchmove = function(event) {
      event.preventDefault();
  }
}

/* Events for the <div id='coverflow'></div> holder */
function handleFingerSwipeStart(event) {
  isMouseDown = true;
  swipeStartX = event.changedTouches[0].pageX;
  event.preventDefault();
}
function handleFingerSwipeMove(event) {
  if (isMouseDown) {
      swipeDistanceX = parseInt(event.changedTouches[0].pageX - swipeStartX);//

      var netDistance = Math.abs(swipeDistanceX);
      //console.log("Move: " + swipeDistanceX + " Net distance: " + netDistance); //changedTouches[0].
      if (netDistance >= thresholdDistanceSingleSlide) {
          //console.log(thresholdDistanceSingleSlide + " covered");
          if (swipeDistanceX < 0) {
              right();
              swipeStartX = event.changedTouches[0].pageX;
          }
          else {
              left();
              swipeStartX = event.changedTouches[0].pageX;
          }
      }
  }
}
function handleFingerSwipeEnd(event) {
  if (isMouseDown) {
      isMouseDown = false;
      swipeStartX = 0;
  }
}

/*
    Events for the <div id="fig"></div> elements where fig starts from 1 to 7. The images are
    inside these element
*/
function handleImageTapStart(event) {
    imageTapStartX = event.changedTouches[0].pageX;
}
function handleImageTapEnd(event) {
    imageTapEndX = event.changedTouches[0].pageX;
    imageTapDistanceX = imageTapEndX - imageTapStartX;
    var targetObj = event.currentTarget;
    if (imageTapDistanceX == 0) {
      clickedIndex = parseInt(targetObj.id.slice(3, 4));
      if (clickedIndex > current) {
          //move right to the clicked index
          diff = clickedIndex - current;
          for (var i = 1; i <= diff; i++) {
              right();
          }
      }
      else if (clickedIndex < current) {
          //move left to the clicked index
          diff = (current - clickedIndex);
          for (var i = 1; i <= diff; i++) {
              left();
          }
      }
      else {
          //same element is clicked....do nothing
         // alert(clickedIndex);
          console.log(targetObj);
          var thumbfile=targetObj.getAttribute("rel");
          document.getElementById("coverflow").style.display="none";
          document.getElementById("content").style.display="block";
            var thumbList=show(thumbfile);
            document.getElementById("Tlist").innerHTML=thumbList;
            window.mySwipe = new Swipe(document.getElementById('slider'),{ 
            callback: function(e, pos) {
            var i = bullets.length;
            while (i--) {
            bullets[i].className = '';
            }
            bullets[pos].className = 'on';
            }
            }),
            bullets = document.getElementById('position').getElementsByTagName('span');
      }
    }
}

/* Functions - left() & right() for actually moving the images when user interacts*/
/* Move an image from L -> R i.e you are swiping from L->R across the screen */
function left() {
  if (current > min) {
      current--;

      for (var i = 1; i <= max; i++) {
          currPos = document.getElementById("fig" + i).getAttribute("cp");
          currAngle = document.getElementById("fig" + i).getAttribute("a");
          if (currPos == "-150" || currPos == "0") {
              newPos = parseInt(currPos) + (gap * 2) * (1);
              if (currPos == "0") {
                  newAngle = -30;
              }
              else if (currPos = "-150") {
                  newAngle = 0;
              }
              else {
              }
          }
          else {
              newPos = parseInt(currPos) + (gap) * (1);
              newAngle = parseInt(currAngle);
          }
          if (i == current) {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
          }
          else {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
          }
          document.getElementById("fig" + i).setAttribute("cp", newPos);
          document.getElementById("fig" + i).setAttribute("a", newAngle);
      }
  }
}
/* Move an image from R -> L i.e you are swiping from R->L across the screen */
function right() {
  if (current < max) {
      current++;

      for (var i = 1; i <= max; i++) {
          currPos = document.getElementById("fig" + i).getAttribute("cp");
          currAngle = document.getElementById("fig" + i).getAttribute("a");
          if (currPos == "150" || currPos == "0") {
              newPos = parseInt(currPos) + (gap * 2) * (-1);
              if (currPos == "0") {
                  newAngle = 30;
              }
              else if (currPos = "150") {
                  newAngle = 0;
              }
              else {
              }
          }
          else {
              newPos = parseInt(currPos) + (gap) * (-1);
              newAngle = parseInt(currAngle);
          }
          if (i == current) {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
          }
          else {
              document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
          }
          document.getElementById("fig" + i).setAttribute("cp", newPos);
          document.getElementById("fig" + i).setAttribute("a", newAngle);
      }
  }
}





// show thumbnails functions

//function show(dname){ 
//  if(window.XMLHttpRequest){
//      xhttp=new XMLHttpRequest();     
//      }
//      else{
//      xhttp=new ActiveXObject(Microsoft.XMLHTTP);  
//        } 
//     xhttp.open("GET",dname,false);     
//     xhttp.send();       
//     var xmlDoc=xhttp.responseXML;
//     var thumblist=xmlDoc.getElementsByTagName("asset");
//    //str=""; 
//    str="<li>";
//    var image= new Array();    
//    for(i=0, tc=1; i<thumblist.length;i++){
//        var x=thumblist[i].childNodes;
//         for(j=0,index=0; j<x.length;j++){
//             if(x[j].nodeType==1){
//                image[index]=(x[j].firstChild.nodeValue);
//                 index++;
//                 }
//               x[j]=x[j].nextSibling;             
//            }
//            str+='<div><a href="'+image[2]+'"><img src="'+image[0]+'"></a><span>'+image[1]+'</span></div>';
//            // tc<thumblist.length check for the last node                          
//             if(tc%6==0&& tc<thumblist.length){
//                  str+="</li><li>";   
//               } 
//          tc++;                  
//        // str+='<div class="thumbwrapper"><img src="'+image[0]+'">'+image[1]+'</div>'; 
//        //str+='<li><img src="'+image[0]+'"><span>'+image[1]+'</span></li>';                    
//        }
//      str+="</li>";  
//   //alert(str);
//   console.log(str);     
//   return str;       
//  }


  function show(dname){ 
    if(window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();     
        }
      else{
        xhttp=new ActiveXObject(Microsoft.XMLHTTP);  
          } 
       xhttp.open("GET",dname,false);     
       xhttp.send();       
       var xmlDoc=xhttp.responseXML;
       var thumblist=xmlDoc.getElementsByTagName("asset");
      //str=""; 
      str="<li>";
      var image= new Array();    
      for(i=0, tc=1; i<thumblist.length;i++){
          // getting the attribute node of every assets
              var thumb=thumblist[i].attributes;
              str+='<div><a href="'+thumb.getNamedItem("url").nodeValue+'"><img src="'+thumb.getNamedItem("thumbnail").nodeValue+'"></a><span>'+thumb.getNamedItem("title").nodeValue+'</span></div>';
              // (tc<thumblist.length) check for the last node                        
               if(tc%6==0&& tc<thumblist.length){
                    str+="</li><li>";   
                 } 
            tc++;                                     
          }
        str+="</li>";  
     //alert(str);
     console.log(str);     
     return str;       
  }

ここに私のHTMLがあります：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>GRAAVAA HTML5</title>

<link href="css/bgLandscape.css" rel="stylesheet" type="text/css">
<link href="css/bgLandscape.css" media="screen and (device-width:768px) and (orientation:landscape) or (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="css/login.css" />

<link href="css/coverflow.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>

</head>

<body>

<div class="bg">
<ul class="cb-slideshow">
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
</ul>

<div id="formContainer" class="formContainer">
            <form id="login" method="post" action="index.html" class="login">
                 <span id="msg" class="error"></span>
<!--                <input type="email" name="email" id="email" value="Email Address" class="stored" required="required" placeholder="admin@mail.com"/>-->
                <input type="email" name="email" id="email" placeholder="Email Address" class="email" style="top:176px;" />
                <input type="text" name="name" id="name"  placeholder="Full Name" class="stored"/>
                <!--<input type="reset" name="reset" value="Skip" />-->
                <input type="button" name="skip" id="skip" value="Skip" class="skip" />
                <input type="submit" name="submit" value="Save" class="submit" />
    </form>

  </div>



<!-- Collection By Type -->

<div id="wrapperType" class="collectionTypeWrapper">
      <div class="container">
        <div id="coverflow">
          <div id="fig1" cp="-225" a="30" rel="xml/granite.xml"><img src="collectionType/granite.jpg" /></div>
          <div id="fig2" cp="-150" a="30" rel="xml/marble.xml"><img src="collectionType/marble.jpg" /></div>
          <div id="fig3" cp="0" a="0" rel="xml/onyx.xml"><img src="collectionType/onyx.jpg" /></div>
          <div id="fig4" cp="150" a="-30" rel="xml/travertine.xml"><img src="collectionType/travertine.jpg" /></div>
          <div id="fig5" cp="225" a="-30" rel="xml/limitededition.xml"><img src="collectionType/limited.jpg" /></div>
        </div>      
      </div>
  </div>

 <!-- Collection By Color -->

<div id="wrapperColor" class="collectionColorWrapper">
      <div class="container">
        <div id="coverflow">        
           <div id="fig1" cp="-150" a="30" rel="xml/natural.xml"><img src="collectionColor/neutral.jpg" /></div>
           <div id="fig2" cp="0" a="0" rel="xml/dark.xml"><img src="collectionColor/dark.jpg" /></div>
           <div id="fig3" cp="150" a="-30" rel="xml/vivid.xml"><img src="collectionColor/vivid.jpg" /></div>
        </div>      
      </div>
  </div>

<div id="popupicon">
<img id="collectionColor" src="images/1.png" style="margin-left:15px" />
<img id="collectionType" src="images/2.png" style="margin:0px 0px 5px 35px" />
</div>


<div id="bottomImgWrapper" class="bottomImgWrapper"></div> 
<div id="bottomImg" class="bottomImg" >
<img src="images/collection.png" class="graavaaImag" id="collection" />
<a href="applications.html"><img src="images/application.png" class="graavaaImag" /></a>
<a href="showrooms.html"><img src="images/showrooms.png"  class="graavaaImag"/></a>
<img src="images/menuLogo.png" class="graavaaIcon" />
</div>    
</div>

<script type="text/javascript">

$("img#collection").click(function(e){
    e.preventDefault(); 
    $("#popupicon").fadeToggle("slow");     
});

$('#skip').click(function(){
    //localStorage.clear();     
    $("#formContainer").css("display","none");
    $("#bottomImgWrapper").css("display","block");
    $("#bottomImg").css("display","block"); 
    // setting the skip flag
    sessionStorage.setItem('flag','true');              
});

$('.login').submit(function() { 
    var email=$(this).children("#email").val();
    var name=$(this).children("#name").val();                       
    var result=validateEmail($(this).children("#email").val());

    if(result==false){
        //$(this).focus();
        $(".error").html('Invalid Email Address');
        $(".email").focus();
        return false;
    }

    if(result==true){
        $(".error").html('');
        localStorage[$("#email").attr('name')] = email;
        localStorage[$("#name").attr('name')] = name;
        alert('Thank You for saving information');
        $("#formContainer").css("display","none");
        $(".bottomImgWrapper").css("display","block");
        $(".bottomImg").css("display","block"); 
        // Dont submit the form in any condition : as it refresh the page  
        return false;
        //return true;  
    }                   

    return false;       
});

$('#collectionType').click(function(){      
        $(".collectionTypeWrapper").css("display","block");
        $(".collectionColorWrapper").css("display","none");
        $("#collectionColor").hide(".collectionTypeWrapper");
        $("#collectionColor").show(".collectionTypeWrapper");

    //$(".collectionTypeWrapper").fadeIn("slow");
    //$(".collectionColorWrapper").fadeOut("slow");
    $("#popupicon").fadeToggle("slow");             
});

$('#collectionColor').click(function(){     
    $(".collectionColorWrapper").css("display","block");
    $(".collectionTypeWrapper").css("display","none");
        //$(".collectionTypeWrapper").fadeOut("slow");
    //$(".collectionColorWrapper").fadeIn("slow");
    $("#popupicon").fadeToggle("slow");             
});

function validateEmail(txtEmail){
   var filter = /^((\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*?)\s*;?\s*)+/;
    if(filter.test(txtEmail)){
        return true;
    }
    else{
        return false;
    }
}

$(document).ready(function(e) {

    function init() {
        //localStorage.clear(); 
        // show the login form if localstorage not persent              

        if(!localStorage["email"]){
            $("#formContainer").css({"display":"block"});
            // hide the bottom images initially
            $("#bottomImgWrapper").css("display","none");
            $("#bottomImg").css("display","none");
        }

        // storing the value into application session
        if(sessionStorage.flag=="true"){
            $("#formContainer").css({"display":"none"});
            $("#bottomImgWrapper").css("display","block");
            $("#bottomImg").css("display","block");
        }

        if(localStorage["email"]){
            $("#formContainer").css("display","none");
            alert('You are already saved as : '+ localStorage["email"]);        
        }
    }

    init();
});

</script>


<script type="text/javascript" src="js/coverflow-color.js"></script>
<script type="text/javascript" src="js/coverflow-type.js"></script>

</body>

</html>
4

1 に答える 1

1

グローバル変数のため、機能しません。2 番目のものは最初のものを上書きします。また、同じ ID を持つ複数の要素を作成します。ID は SINGULAR です。同じ ID を持つ要素を複数持つことはできません。

于 2012-10-05T12:50:34.347 に答える