Question

我想知道如何用js或jquery更改div内容...我有一个id =“container”的div，其中包含5个不同id的div。我需要的是从id开始的第一个div =“蒸汽”然后，通过单击按钮更改为id =“baiat”的下一个div，依此类推。这是我的代码，我无法添加任何js或jquery :(

<div id="container" class="thirdcanvas">

       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>

       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     

       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 

       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  

       <div id="umbrela">   
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/n.png" alt=""/>
           <img src="images/alfabet/m.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
           <img src="images/alfabet/e.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
       </div>  
   </div>

我现在有了这段代码：

var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");

var imgNumber=0; 

var numberOfImg = image.length;

function nextImage(){

    $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("#click").click(function(){

    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

   divWithoutHiddenClass.addClass('hidden');

       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});

  if(imgNumber < numberOfImg){
    imgNumber++;
    }
  document.slideImage.src = image[imgNumber-1];

 }



if(document.images){

   var image1 = new Image();
   image1.src = "images/vapor.png";
   var image2 = new Image();
   image2.src = "images/baiat.png";
   var image3 = new Image();
   image3.src = "images/colac.png";
   var image4 = new Image();
   image4.src = "images/slapi.png";
   var image5 = new Image();
   image5.src = "images/umbrela.png";

   }

with：

<a href="#" onClick="nextImage()"><img id="click" src="images/nextBtn.png" title="Continuare" /></a>

Answer 1

Check this fiddle

var parentElem = $('#container');
var parentWidth=parentElem.outerWidth();

$('#left').click(function(){
    var sr=parentElem.scrollLeft();
    parentElem.scrollLeft(sr-parentWidth); 
});

$('#right').click(function(){
   var sr=parentElem.scrollLeft();
   parentElem.scrollLeft(sr+parentWidth); 
});

Answer 2

fiddle

<强> JS

$("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

    $("#click").click(function(){

        var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

       divWithoutHiddenClass.addClass('hidden');

           if(divWithoutHiddenClass.next().html()===undefined){
               $("#container div:first").removeClass('hidden');
        }
        else{
            divWithoutHiddenClass.next().removeClass('hidden');
        }
    });

切换div内容javascript jquery

2 个答案:

Check this fiddle