Блог

Главная - Вопросы по программированию - Некоторым href присваиваются, а некоторые отсутствуют в jquery / javascript

Некоторым href присваиваются, а некоторые отсутствуют в jquery / javascript

#javascript #jquery #anchor

#javascript #jquery #привязка

Вопрос:

Я назначаю ссылки на href 12 тегам привязки из 12, только первые 6 назначаются, а остальные 6 не назначаются. теги привязки находятся в карусели owl. Ниже приведен код

 $("#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-код:-

 <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>

Я думаю, что это проблема DOM …….. как ее решить??
Заранее спасибо.

Комментарии:

1. Не могли бы вы добавить свой HTML?

2. Можете ли вы предоставить фрагмент, чтобы продемонстрировать проблему. Похоже, этот код работает.

3. да, этот код работает …… но когда вы добавляете owl carousel, он не присваивает последние 6 URL-адресов

Ответ №1:

Трудно отладить проблему с ограниченными ресурсами реальной проблемы :).

Я думаю, вы используете параметр цикла Owl? Это приведет к клонированию элементов. Клонированные идентификаторы тега не будут изменены. Поэтому вместо этого лучше использовать класс the .

(Пожалуйста, не обращайте внимания на уродливый стиль примера ;))

  
  $('.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>

Комментарии:

1. большое спасибо……….. создание класса для каждой ссылки решало problem…………..as У меня есть 12 различных ссылок для назначения…. Мне нужно создать 12 классов ……. преобразованные идентификаторы в классы ……. большое спасибо