Как изменить класс из родительского div? - PullRequest
Новая
       84

Как изменить класс из родительского div?

1 голос
/ 11 июля 2020

Как добавить класс в .bio, нажав .polaroid? 

$(".polaroid").click(function() {
  $(this).addClass("selected");
  if ($(".photogroup").getElementsByClassName("polaroid")[0].hasClass("selected")) {
    $(".photogroup").getElementsByClassName("bio")[0].addClass("showbio");
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photogroup">
  <div class="polaroid">
    <div class="foto">
      <img src="images/il-futuro-dei-deboli-che-hanno-coraggioil-rapper-tedua-arriva-a-stezzano_d067474c-23ae-11e8-a2da-ce72c2bcf803_936_1134_big_gallery_linked_i.jpg">
    </div>
    <h3>03/03/2033</h3>
  </div>

  <div class="bio">
    <h3>Evento</h3>
    <p>Lorem ipsum bla bla</p>
  </div>
</div>

Я пробовал несколько вещей, но ни один из них не работал, я также пробовал перейти с .parent() и .getElementsByClassName, но там написано, что getElementsByClassName не функция, кто-нибудь знает, как это сделать?

Ответы [ 3 ]

1 голос
/ 11 июля 2020

getElementsByClassName() - это обычная функция JavaScript, но вы используете ее так, как если бы это была функция jQuery. Вы можете попробовать использовать hasClass() следующим образом: 

$(".polaroid").click(function(){
  $(this).addClass("selected");
  if($(".photogroup .polaroid").hasClass("selected")){
      $(".photogroup .bio").addClass("showbio");
  }
});
.showbio{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photogroup">
  <div class="polaroid">
      <div class="foto">
          <img src="images/il-futuro-dei-deboli-che-hanno-coraggioil-rapper-tedua-arriva-a-stezzano_d067474c-23ae-11e8-a2da-ce72c2bcf803_936_1134_big_gallery_linked_i.jpg">
      </div>
      <h3>03/03/2033</h3>
  </div>

  <div class="bio">
      <h3>Evento</h3>
      <p>Lorem ipsum bla bla</p>
  </div>
</div>
0 голосов
/ 11 июля 2020

, если у вас несколько классов .photogroup, используйте это: 

$(document).ready(function(){
  $(".polaroid").click(function(){
   $(this).parent().find(".bio").addClass("selected");
  });
});
0 голосов
/ 11 июля 2020

ну ... это, вероятно, дубликат, но я все равно отвечу

Прежде всего - если вы используете jQuery, вы выбираете с помощью $ ('. Class или #id'), а затем просто addClass - также из jQuery, поэтому придерживайтесь jQuery

Код выглядит так: 

$(document).ready(function(){
  $(".polaroid").click(function(){
    $(".bio").addClass("selected");
  });
});

getElementsByClassName чистый javascript - если вы уже используете jQuery нет смысла использовать это. Также потому, что вы полностью смешиваете эти jQuery и чистый Javasscript таким образом, что это не сработает. Я имею в виду - эта строка ниже - gibberi sh

$(".photogroup").getElementsByClassName("bio")[0].addClass("showbio");

Правильный способ выбора класса в чистом javascript подробно объясняется здесь:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

...