CODEWITHSUNDEEP
jqueryhideselectorthisshow
huddds
huddds

Reputation: 1045

Link onclick add link id to Selector

I'm trying to add the id of my link to the selector in my function so that .XXXXXX1,2 or 3 is shown or hidden depending on which link is clicked. Here's the code I have put together so far:

I've tried doing $('.video' + videoplay) which is the type of thing i'm after but this doesn't work.

Jquery:

 $(document).ready(function() {
      $('.videoPlay').click(function(){
          var videoplay = $(this.id);
          $('.videoSubTitle').hide();
          $('#video' + videoplay).show();
          $('#videoPlay' ).hide();
          $('#videoPlay' + videoplay).show();
      });
 });

HTML:

 <h2>Latest videos</h2>
 <h3 class="videoSubTitle">Choose a video below</h3>
 <h3 class="videoSubTitle" id="video1" style="display:none;">Video 1</h3>
 <h3 class="videoSubTitle" id="video2" style="display:none;">Video 2</h3>
 <h3 class="videoSubTitle" id="video3" style="display:none;">Video 3</h3>

 <div id="listContainer">

 <div id="videoPlay1">
 <img src="" style="width:650px; height:360px;" />
 </div>

 <div id="videoPlay2" style="display:none;">

 </div>

 <div id="videoPlay3" style="display:none;">

 </div>

<div id="videoContent 1">
    <img src="" width="240" style="margin-right:20px;" height="150" alt="video 1" align="left" />
    <h2>Video 1 <a class="videoPlay" id="1" href="#">WATCH NOW</a></h2>
    <h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
    <br /><span style="font-size:12px;">Length: 59 secoonds</span>
    </span>
    </h4>
</div>

 <div id="videoContent 2">
    <img src="" width="240" style="margin-right:20px;" height="150" alt="video 2" align="left" />
    <h2>Video 2 <a class="videoPlay" id="2" href="#">WATCH NOW</a></h2>
    <h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
    <br /><span style="font-size:12px;">Length: 59 secoonds</span>
    </span>
    </h4>
</div>

 <div id="videoContent 3">
    <img src="" width="240" style="margin-right:20px;" height="150" alt="video 3" align="left" />
    <h2>Video 3 <a class="videoPlay" id="3" href="#">WATCH NOW</a></h2>
    <h4><span class="lblShortDesc">berhj brhej beghrjbg hrjebh grebeghr jbh rjbh jgrebhjg rbhj gbehrjbr ehjbgh rejbeghjr<br />
    <br /><span style="font-size:12px;">Length: 59 secoonds</span>
    </span>
    </h4>
</div>

Upvotes: 1

Views: 352

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

var videoplay = $(this.id); is wrong, it should not be wrapped in $().

$(document).ready(function() {
      $('.videoPlay').click(function(){
          var videoplay = this.id;
          $('.videoSubTitle').hide();
          $('#video' + videoplay).show();
          $('#videoPlay' ).hide();
          $('#videoPlay' + videoplay).show();
      });
 });

Demo: Fiddle

Upvotes: 2

Related Questions