CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Gerald
Gerald

Reputation: 1083

jquery show another link then hide itself

I have this following jquery on my view:

$(document).ready(function() {
    $(function() {
        $('#link1').click(function() {
            $('#link2').show();
            $('#link1').hide();
            $('#frame').attr('src', 'http://google.com/');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('#link2').click(function() {
            $('#link1').show();
            $('#link2').hide();
            $('#frame').attr('src', 'http://yahoo.com/');
        });
    });
});

On pageload, the link2 is set to hide. What the jQuery does is: when the link with id link1 is clicked, it will show the link with idlink2 and hide itself. And vice versa.

My problem is it seems that my jQuery code can still be simplified. Is there other ways I can do what I wanted with simpler version? Thanks for the help!

Working example : http://jsfiddle.net/cuJBm/

Upvotes: 1

Views: 552

Answers (3)

Abraham P
Abraham P

Reputation: 15471

$(document).ready(function() {
    $(function() {
      var linkSet = $('#link1').add('#link2')
      linkSet.click(function() {
        linkSet.toggle();
      });
    });
});

The add method allows you to add a different selector to the set of matchers, thus binding both clicks simultaneously. By saving the constructed set to a variable (linkSet), it stops you from having to traverse the DOM twice.

The only two assumption made here, are

1) That in the initial state only one is visible.

2) That the id structure is meaningful, useful, and classes will not suffice.

http://jsfiddle.net/cuJBm/1/

To answer your second question about setting an attribute on #frame. There are numerous ways of doing this. Perhaps the simplest is to add the following to your .click handler (after the toggle).

if ($(this).attr('id')=='link1'){
    $('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
    $('#frame').attr('src', 'www.yahoo.com');
}

Personally, I would probably add a custom attribute to your link elements, something like:

<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>

And then: (again, just after the toggle):

source = $(this).attr('iframe-source');
$('#frame').attr(src, source);

The reason for saving source if is that if you attempt to get $(this) within the .attr on $('frame'), it will (as always) return the currently matched element, ie $('#frame').

Alternately (and very similiarly to the above approach), you could use the innerHTML of the link. For example:

<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>

And then: (again, just after the toggle):

source = $(this).find('span').text();
$('#frame').attr(src, source);

Personally, I dislike this last method as it pollutes the DOM structure, leading to slightly more expensive rendering times, and (in my opinion) less readable code. Practically, all three methods work just fine.

Upvotes: 3

m1k1o
m1k1o

Reputation: 2364

Use jQuery toggle()

just add this

<a href="http://google.com/" target="frame" id="link1"> Google </a>
<a href="http://yahoo.com/" target="frame" id="link2"> Yahoo </a>

target is id of the frame

$(function() {
  $('#link1, #link2').click(function() {
    $('#link1, #link2').toggle();
  });
});

Upvotes: 1

suhailvs
suhailvs

Reputation: 21680

<p class="link" style="display:none;" data-link="http://google.com/">sfdf</p>
<p class="link" data-link="http://yahoo.com/">ee</p>

$('.link').click(function() {
    $('.link').toggle();
    $('#frame').text($(this).data("link"));
  });

jsfiddle :http://jsfiddle.net/xqDus/1/

Upvotes: 1

Related Questions