一些href被分配，一些不在jquery/javascript中

Question

I am assigning a href links to 12 anchor tags out of 12 only the first 6 are getting assigned and the other 6 are not getting assigned. anchor tags are in the owl carousel. Following is the code

$("#australia").on("click",function(e) {
  $("#link1").attr("href", "aust"); 
  $("#link2").attr("href", "aust"); 
  $("#link3").attr("href", "aust"); 
  $("#link4").attr("href", "aust"); 
  $("#link5").attr("href", "aust"); 
  $("#link6").attr("href", "aust"); 
  $("#link7").attr("href", "aust"); 
  $("#link8").attr("href", "aust"); 
  $("#link9").attr("href", "aust"); 
  $("#link10").attr("href", "aust");    
  $("#link11").attr("href", "aust");    
  $("#link12").attr("href", "aust");
});

HTML code:-

<div class="pricing-area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-tittle text-center">
                        <h2>Choose your Plan</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 flags">
                    <p>Select server location to host your VPS</p>
                    <div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div>
                    <div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div>
                    <div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div>
                    <div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div>
                    <div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div>
                    <div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div>
                    <div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div>
                </div>
            </div>  
            <div class="row completed-cases">       
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class=" completed-active owl-carousel"> 
                        <div class="single-cases-img">
                            <div class="single-pricing">
                                <div class="pricing-header">
                                    <h4>PLAN 1</h4>
                                </div>
                                <div class="pricing-body">
                                    <div class="pricing-price">
                                        <h3><sup>$</sup>1<sub>/mo</sub></h3>
                                    </div>
                                    <ul>
                                        <li><i class="fa fa-tasks"></i>  CPU Cores : <strong>1 vCore</strong></li>
                                        <li><i class="fa fa-magic"></i>  Guaranteed RAM : <strong>2 GB</strong></li>                                            
                                    </ul>                                       
                                </div>
                                <div class="pricing-footer">
                                    <a href="" data-toggle="modal" data-target="#FirstPlans" class="link">Included Features</a>
                                    <a id="link1" href="" class="boxed-btn">Buy Now</a>
                                </div>
                            </div>  
                        </div>
                  </div>
            </div>
      </div>
</div>

I think this is a DOM problem........how to solve it?? Thanks in advance.

Answer 1

Hard to debug the issue with limited resources of the actual problem :).

I think you're using the loop param of Owl? That will clone the items. The cloned id's of the tag will not be changed. Therefore it's better to hook on the class of the instead.

(Please don't mind the ugly style of the example ;) )

 $('.owl-carousel').owlCarousel({ items: 1, nav: true, dots: false, loop: true }); $("#australia").on("click",function(e) { $('.boxed-btn').attr("href", "aust"); });

 /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* Additional for buttons */ .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { background-color: #f5f5f5; padding: .5em 1em !important; margin: 1em; border: 1px solid #ccc; font-size: 20px; border-radius: .1em; }

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> </head> <body> <div class="pricing-area section-padding"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="section-tittle text-center"> <h2>Choose your Plan</h2> </div> </div> </div> <div class="row"> <div class="col-lg-12 flags"> <p>Select server location to host your VPS</p> <div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div> <div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div> <div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div> <div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div> <div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div> <div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div> <div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div> </div> </div> <div class="row completed-cases"> <div class="col-xl-12 col-lg-12 col-md-12"> <div class=" completed-active owl-carousel"> <div class="single-cases-img"> <div class="single-pricing"> <div class="pricing-header"> <h4>PLAN 1</h4> </div> <div class="pricing-body"> <div class="pricing-price"> <h3><sup>$</sup>1<sub>/mo</sub></h3> </div> <ul> <li><i class="fa fa-tasks"></i> CPU Cores : <strong>1 vCore</strong></li> <li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>2 GB</strong></li> </ul> </div> <div class="pricing-footer"> <a href="" data-toggle="modal" data-target="#FirstPlans" class="link">Included Features</a> <a id="link1" href="" class="boxed-btn">Buy Now</a> </div> </div> </div> <div class="single-cases-img"> <div class="single-pricing"> <div class="pricing-header"> <h4>PLAN 2</h4> </div> <div class="pricing-body"> <div class="pricing-price"> <h3><sup>$</sup>1<sub>/mo</sub></h3> </div> <ul> <li><i class="fa fa-tasks"></i> CPU Cores : <strong>2 vCore's</strong></li> <li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>4 GB</strong></li> </ul> </div> <div class="pricing-footer"> <a href="" data-toggle="modal" data-target="#FirstPlans" class="link">Included Features</a> <a id="link2" href="" class="boxed-btn">Buy Now</a> </div> </div> </div> <div class="single-cases-img"> <div class="single-pricing"> <div class="pricing-header"> <h4>PLAN 3</h4> </div> <div class="pricing-body"> <div class="pricing-price"> <h3><sup>$</sup>1<sub>/mo</sub></h3> </div> <ul> <li><i class="fa fa-tasks"></i> CPU Cores : <strong>4 vCore's</strong></li> <li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>8 GB</strong></li> </ul> </div> <div class="pricing-footer"> <a href="" data-toggle="modal" data-target="#FirstPlans" class="link">Included Features</a> <a id="link3" href="" class="boxed-btn">Buy Now</a> </div> </div> </div> </div> </div> </body> </html>