CODEWITHSUNDEEP
jquerydynamicjquery-selectors
maxbeizer
maxbeizer

Reputation: 857

Show image and then change link using jquery

Hours of searching and still no answer I can understand for this one: I am trying to add a link whose href changes depending upon which image in a carousel is selected (i.e. pick an image and then the link at the bottom changes).

Pick the currrent image by changing the opacity of a the current image display using the class opaque-fabric:

        $('#current').ready(function() {
                        $("#carousel-2 img").click(function() {
                            $("#current img").removeClass("opaque-fabric");

                            var imageToShow = $(this).attr("id").replace("for-", "");
                            $("#current #"+imageToShow).addClass("opaque-fabric");

                            $("#carousel-2 img").removeClass("selected-fabric");
                            $(this).addClass("selected-fabric");            
                        });

                    });

Then change the end of the href in the "choose-button" anchor link of my page: 

    $('.choose-button').ready(function() {
                            $("#carousel-2 img").click(function() {

                var button = $(this).attr('class');
                var currenthref = $(".choose-button").attr('href');
                $(".choose-button").attr('href', currenthref + button);


            });

        });

The image display part works, but I cannot seem to append the href in the button. Please help and speak slowly (beginner).

EDIT: Here's what I'm working with, on a test server.

Upvotes: 0

Views: 346

Answers (2)

elclanrs
elclanrs

Reputation: 94101

I can't seem to really understand your question but you have a few serious errors. First you're not using ready() correctly. From jQ API:

The .ready() method can only be called on a jQuery object matching the current document.

Then you should be using attr() instead of prop() since href is an attribute, not a property. Also live() is deprecated in favor of on().

Upvotes: 1

Scorpion-Prince
Scorpion-Prince

Reputation: 3634

jQuery's .append() function is used to append DOM elements to other DOM elements. If you want to update the href property, use the syntax

var currenthref = $(".choose-button").prop('href');
$(".choose-button").prop('href', currenthref + button);

Hope this helps!

Upvotes: 0

Related Questions