CODEWITHSUNDEEP
javascriptjqueryeventsonclickattr
Mervodactyl
Mervodactyl

Reputation: 101

jQuery - How to change BOTH image & text using onClick event?

My goal is to create an jQuery event, that when a particular list element has been clicked on, both the persons image and info changes accordingly.

I am new to jQuery and would like to know how to Switch Between Multiple Classes for Two separate Elements (img and p), and have the correct correlating images and text, change (using the same jQuery effects) once a click event has occurred.

I have managed to use the below jQuery to change the images back and fourth as I desire when clicked on, but do not know how to integrate the text/p/corresponding info along with it.

JS

$(document).ready(function) {
  $("a").click(function(e) {
      e.preventDefault();
      var newClass = $(this).attr("id");
      var oldClass = $("#full-size-image").attr("class"):
          $("#full-size-image").fadeOut(function() {
              $("#full-size-image").removeClass(oldClass).addClass(newClass).fadeIn("slow");
          });
  });
});

This is the HTML and CSS/SCSS I am using, in the hope that it makes the above code clearer

HTML

<div id="center-row" class="row">
    <nav class "column-4">
        <ul>
            <li><a href="#" id="bill">BILL</a></li>
            <li><a href="#" id="molly">MOLLY</a></li>
            <li><a href="#" id="anna">ANNA</a></li>
            <li><a href="#" id="sue">SUE</a></li>
        </ul>
    </nav>
    <section class="column-8">
        <div id="full-size-image" class="bill">
            &nbsp
        </div>
    </section>
</div>
<div class="row">
     <footer class=" column-12 ">
      <p id="text-box " class="bill-info ">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a tristique sapien, eget posuere dolor. Nulla quis leo vitae lorem luctus tempor. Cras vitae sem vel dui dapibus sagittis. Phasellus a odio finibus, ullamcorper dolor non, congue augue. Nullam vitae metus at velit efficitur placerat. Duis a pharetra velit, a faucibus ipsum. Ut malesuada ligula sed dui tempus, vel dapibus mi gravida.
      </p>
     </footer>
</div>

CSS 

section #full-size-image {
    background-size: 100%;
    border: 2px solid black;
}

section .bill {
    background: url('../images/bill.png') no-repeat;
}

section .molly {
    background: url('../images/molly.png') no-repeat;
}

section .anna {
    background: url('../images/anna.png') no-repeat;
}

section .sue {
    background: url('../images/sue.png') no-repeat;
}

Upvotes: 0

Views: 2383

Answers (2)

Aramil Rey
Aramil Rey

Reputation: 3475

You can create the text as a JSON object on your script or in a separate file and use AJAX, for simplicity I made my example creating a JSON object into the JS script

Look at this JSFiddle

This would be your JS:

// Globals 
var text = {
  'bill': "this is Bill's text",
  'molly': "this is Molly's text",
  'anna': "this is Anna's text",
  'sue': "this is Sue's text"
}

// You dont need to re-set this variable each time a click is done
// So we take it out of the click function
var fs = $("#full-size-image");
var tb = $("#text-box");

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
    var newClass = $(this).attr("id");
    var oldClass = fs.attr("class");

    // Change the image
    fs.fadeOut(function() {
      fs.removeClass(oldClass).addClass(newClass).fadeIn("slow");
    });

    // Change the text
    tb.fadeOut(function() {
      // Here, we search inside the text variable 
      // looking for a key matching the ID of the clicked <a>
      tb.text(text[newClass]).fadeIn('slow');
    });
  });
});

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

You can set text of p on click of a

$('#text-box').text($(this).text());

this refers to the element being clicked

Upvotes: 0

Related Questions