Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashley Shay
Ashley Shay
8,664 Points

jQuery and Data Attributes

Hi,

I'm just learning jQuery and I managed to implement my first little function to change the price for various hair stylist services on a site I'm working on. I did this by utilizing the data-attribute in my links and then calling them into the appropriate space on-click (effectively replacing the old price).

I was very excited about this, but I also need to be able to change three other elements: 1) the heading of the new service, 2) a description of the new service, and 3) an image to show a 'sample' of that style/cut.

I thought it was would be easy to use the same method to change the heading... but I wasn't sure how appropriate that would be for the description (with more text) or if I could even do that with an image?

Any thoughts or ideas on alternate means I could use to go about changing the rest of the content?

1 Answer

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

For the description, you could put the text into a hidden element, and then display it on an event (like a click event). Same with the image, infact depending on your layout you could put them into the same containing div, and hide that div by default, and then show it on an event (like a click event). 

<div class="hidden-el" style="display: none;" >
  <div class="image-container">
    <img src="" />
  </div>
  <div class="descripton">
     words words words words words words words words words words words  
  </div>
</div>

<script>
$('some-selector').on('click', function(){
  $('.hidden-el').show();
});
</script>
Ashley Shay
Ashley Shay
8,664 Points

Thanks! Would this replace the original text or would it just reveal the hidden text under the original text?

I'm looking to replace it. So, if you were looking at women's haircuts and then clicked on "men's," all the info about the women's haircuts would be replaced by info about men's.

Ashley Shay
Ashley Shay
8,664 Points

Sooo... I figured out that it would replace it as long as it hid the other element. My next problem is that I can't put the image in the same container (at least I don't think I can) because I want it to be styled separately and in a different position... but when it's not in the same container, I can't figure out how to make it work together with the other elements. I'm pasting the code I used to achieve the first half of my effect and a little screenshot of what I'm working on if that helps. :)

    $('.label').on('click', 'a', function(event) {
        event.preventDefault();
        $('.hidden').hide();
        var showDesc = $(this).attr('href');
        $(showDesc).show();
    });

Here... .label is the class name of the links (not the main nav, but more of a sub nav) that would control the content switching. I gave the links the href #id of the divs I wanted it to display on click. The problem is that since I don't want the image in the same container... I can't use the same ID twice, right?

screenshot

Ashley Shay
Ashley Shay
8,664 Points

At the risk of sounding crazy ... I think I've solved both issues, now. I just went to the data-attribute technique and applied that to swap out the img "src" of the image on click. So far, it seems to work as desired... fingers crossed. :)

My whole new function looks like this... please let me know if you see anything that could be improved! As I said, I'm just tinkering around with all of this. :)

    function theSwitch (event) {
        event.preventDefault();
        var example = $(this).data('image');
        var showDesc = $(this).attr('href');
        $('.example').find('img').attr('src', example);
        $('.hidden').hide();
        $(showDesc).show();
    };

    $('.label').on('click', 'a', theSwitch);