Changing links dynamically with jQuery

Question

Is it possible to check whether an li has a specific class and then change an attribute.

<ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#carousel"></li>
    <li data-slide-to="1" data-target="#carousel"></li>
    <li data-slide-to="2" data-target="#carousel"></li>
</ol>

When an li is displayed it will add class=active as shown in the example below.

<li data-slide-to="2" data-target="#carousel" class="active"></li>

I want to target the class and then change the dynamically.

$("#carousel-link").attr("href", "http://www.w3schools.com/jquery");

For example if if li data-slide-to="1" is actve I want to change the link dynamically by using $("#carousel-link").attr("href", "http://www.w3schools.com/jquery");

For example if if li data-slide-to="2" is actve I want to change the link dynamically by using $("#carousel-link").attr("href", "http://www.w3schools.com/php");

please post JS code to be able to run the code and reproduce the issue — Peter Wilson
– Peter Wilson, Commented May 16, 2016 at 9:46
What do you mean by "I cannot get the links to the video to change"? Are you trying to change the "href" attribute of the actual link or are you trying to get the link text to fade like the image? What are you trying to accomplish? — WonderGrub
– WonderGrub, Commented May 16, 2016 at 14:43
@WonderGrub I have changed my question to outline exactly what I am trying to achieve — Martin
– Martin, Commented May 16, 2016 at 14:53

jelliaes · Accepted Answer · 2016-05-16 09:55:32Z

1

In your HTML code you have an end tag

</section>

but there is no

<section>

that precedes it. Make sure this is fixed and see if the problem persists.

edited May 16, 2016 at 9:55

jelliaes

5055 silver badges18 bronze badges

answered May 16, 2016 at 9:50

andreini

1981 gold badge3 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Over a year ago

I have changed my code to provide a better example. Thanks for your answer.

WonderGrub · Accepted Answer · 2016-05-16 16:30:40Z

0

If I understand correctly, I don't think you want to look for which slide is active. You actually want to bind to the carousel's events.

Bootstrap Carousel Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").

relatedTarget: The DOM element that is being slid into place as the active item.

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

slide.bs.carousel This event fires immediately when the slide instance method is invoked.

slid.bs.carousel This event is fired when the carousel has completed its slide transition.

You'll likely want to use the "slide" event, then handle the change within the callback function.

$('#carousel').on('slide.bs.carousel', function () {
  // handle update here
})

One thing confuses me about your code. Do you need to update the "href" value or can it simply be set when the slide is built? The above solution is great if you are determining the "href" dynamically on slide change. But, if you know what the value should be when the page loads, it would be much easier to just set it.

EDIT: Updating "href" of target slide

Based on your structure, you can update the "href" of the upcoming slide like this:

$('#carousel').on('slide.bs.carousel', function (event) {
    $(event.relatedTarget).find('a').attr('href', 'your-new-url');
})

edited May 16, 2016 at 16:30

answered May 16, 2016 at 15:08

WonderGrub

3961 silver badge10 bronze badges

2 Comments

Martin Over a year ago

I have tried to set it when the slide was built however the href never changes. I think it is due to the CSS I have implemented. Your above solution should do the trick for me however I am unsure how I change the link if it is on a specific slide.

WonderGrub Over a year ago

I've updated my answer with an example. Hope that helps.

Collectives™ on Stack Overflow

Changing links dynamically with jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related