CODEWITHSUNDEEP
jquery
Ian Lin
Ian Lin

Reputation: 13

jQuery- to get numbers1-8 instead of 0,4,7,9..etc

Thanks for all the help, but I just figured it out that how to make it look good.!!! I've learned a lot from here!

updated* So I got this one combined from two people's code...and it needs to add the removing pic process or else the pics are over showing on the location. please, I am almost there :s

For the img I've set this on css but when it is display:none, the pics wont show again, if I dont set the display then the pics just keep adding it up on the area.

  display: none;
 .is-active{
  display: block;
  }


$d
  .on('click','.accordion .r', (e)=>{

    const $targetImgNum = $(e.target).data('target');
    console.log($targetImgNum)
    $('.swing').append('<div class="switch"><img src="images/swing/'+($targetImgNum)+'.jpg" alt=""></div>')
  });

thanks for all the suppots, your codes are worked but just not with my code. if I choose h3 to be a selector, does it work well just like div? I'm thinking because this is the only one spot is different from the codes you guys provided.

here's an example which Im trying to do...

https://jsfiddle.net/99v2gkp3/

The HTML Code 

         <div class="accordion">
            <h3 class="r" show-id="img1"></h3>
              -----content has been deleted cuz it is irrelevant ----------
          </div>
      <div id='swingpic'>
         <div class="swing">
           <div ><img src="images/swing/1.jpg" alt=""></div>
           <div ><img src="images/swing/4.jpg" alt=""></div>
           <div ><img src="images/swing/7.jpg" alt=""></div>
           <div ><img src="images/swing/9.jpg" alt=""></div>
           <div ><img src="images/swing/13.jpg" alt=""></div>
           <div ><img src="images/swing/15.jpg" alt=""></div>
           <div ><img src="images/swing/17.jpg" alt=""></div>
           <div ><img src="images/swing/19.jpg" alt=""></div>
         </div>
      </div>
   </div>

Since I am from overseas, please forgive if my grammar disturbs your eyes.

I'd like to get the numbers from 1-8 instead of the number which console.log shows me like 0,4,7,9,..... I have 8 btns and each one shows one different pic. Here the hint my teacher gave me 

$('.btn').click(function(){
  $(this).index()
  console.log(count)};
$(".pic").eq(count).fadeIn().siblings().fadeOut()

please! I've tried creating a loop to get the right numbers but I just kept failing. :(

Upvotes: 1

Views: 68

Answers (2)

Ajay Singh
Ajay Singh

Reputation: 62

Try this

function clickHandler(){ 
  var count = $(this).index();
  console.log(count);
  $(".pic").eq(count).fadeIn().siblings().fadeOut();
}

$('.btn').click(clickHandler);
 $('.pic').fadeOut(); // by default hiding all images on load

Html should be like this 

<div class="btn-wrapper">
 <div class="btn"> 1</div>
 <div class="btn"> 2</div>
 <div class="btn"> 3</div>
</div>
<div class="pic-wrapper">
   <div class="pic" ><img src="images/swing/1.jpg" alt=""></div>
   <div class="pic" ><img src="images/swing/4.jpg" alt=""></div>
   <div class="pic" ><img src="images/swing/7.jpg" alt=""></div> 
 </div>

Upvotes: 0

Raaj Dubey
Raaj Dubey

Reputation: 182

are you looking for something like this.. http://jsfiddle.net/7xhxq/

$(document).ready(function () {
    $('.buttontest').click(function () {
    $(this).parent().find('img.logotest').toggle('slow');
    });
    });

Upvotes: 1

Related Questions