Question 15097 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can I change an attribute value in one element using another onclick? – Jquery

I have a webpage with multiple thumbnails all positioned side-by-side. When an image is clicked, a modal window pops up displaying a larger version of the image and a close button. I want the window to change its image src when one of the image "buttons" is clicked. So i have attempted to put an attribute called "imgsrc" inside the span elements which are all under the div whose class="graveyard-dump"

HTML

\button that looks like a thumbnail of "image 04"\
<button button="click"
        class="graveyard-btn graveyard-primary"
        data-toggle="modal"
        data-target="#exampleModal"
        imgsrc="http://example.com/wp-content/uploads/04.png">
        <img src= "http://example.com/wp-content/uploads/04.png">
    </button>


\Image of modal set to "image 22" as default\
 <div class="modal-body">
        <img class="modal-image" 
             src="http://example.com/wp-content/uploads/22.png"
             alt="Click on button" />

Non-working jQuery

\On Click change the modal image src attribute to the value at imgsrc of the thumbnail element clicked\
$('.graveyard-dump span').ready(function click(f) {
       $('.graveyard-dump span').click(function click(f) {
            $('.modal-image').attr('src', $(this).attr("imgsrc"));
    });
});

I got the idea to reuse code from another program I have which changes a series of css elements and text on click. Here is some code that works which i stole the idea from:
HTML

///Red button with many attribute values for the jQuery to read and place///
 <span   class="redbtn1" 
                    picChange="url(http://example.com/wp-content/uploads/Resin-Red.png)" 
                    name="Red" 
                    color="#ff0000" 
                    background1="#ff2400"  
                    background2="#ba110c"  
                    background3="#90021F"  
                    background4="none"
                    name1="Scarlet"
                    name2="Crimson"
                    name3="Burgundy"
                    name4="-"
                    ></span>

jQuery

///Reads a click, adds the class "active" and removes it from other buttons, changes many attributes around the page. None of these are attribute-attribute changes though./// 
$('.changecolor span').ready(function click(f) {
        $('.changecolor span').click(function click(f) {
            $('.changecolor span').removeClass("active");
            $(this).addClass("active");
            $('.pic').css('background-image', $(this).attr("picChange"));
            $('.name').text($(this).attr("name"));
            $('.name').css('color', $(this).attr("color"));
            $('.colorbar-1').css('background', $(this).attr('background1'));
            $('.colorbar-2').css('background', $(this).attr('background2'));
            $('.colorbar-3').css('background', $(this).attr('background3'));
            $('.colorbar-4').css('background', $(this).attr('background4'));
            $('.colorbar-1').text($(this).attr("name1"));
            $('.colorbar-2').text($(this).attr("name2"));
            $('.colorbar-3').text($(this).attr("name3"));
            $('.colorbar-4').text($(this).attr("name4"));
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The fix was to use

    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#modal-image").attr("src", $(this).attr("imgsrc"));
  });
});
</script>

    I set '.modal-image' src attribute to the attribute "imgsrc" of the button clicked. I also had to remove the starter image located in .modal-image src or it would try to load that image on the first click.


  2. 0

    You could achieve the image source change like this

    <img id="display" src=""/>

    <button onclick="$('display').src='https://imageLink.com'">Click me</button>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search