Как отобразить выбранный Div и скрыть других родных Div? - PullRequest
Новая
       0

Как отобразить выбранный Div и скрыть других родных Div?

1 голос
/ 18 апреля 2020

Я хочу, чтобы все невыбранные div исчезли и показывали мне только выбранную карту. У меня есть разные карты, идентификаторы которых являются Dynami c (по умолчанию ++), используя l oop, а также я добавил, что при использовании select div он выбирает красную рамку над div.

Я попробовал другой метод, когда я нажимаю на выбранный div, который выбранный div останется, остальные div исчезнут. 

//Showing border on the selected card 
$('.selects').click(function() {
  if ($('.selects.choice').length > 0) {
    $('.choice').removeClass('choice');
    $(this).addClass('choice');

  } else {
    $(this).addClass('choice');

  
  }
});
.card{
    margin:5px;
    width:140px;
    display: flex !important;
    justify-content: center;
    align-items:center;
    
}

#operatorImage >img {
        width:100px;
        height:50px;
    }
    
.choice {
    border: 3px #CA0B00 solid;
    text-decoration: none;
}

.operator-card{
    
    cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="default-0" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
      
</div>

 <div id="default-2" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


<div id="default-3" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Nigira</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">MTN</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

</div>

<div id="default-2" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
</div>

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Вы можете просто переключаться между братьями и сестрами примерно так: 

$('.card-body').click(function() {
  $('.card-body').not(this).hide();
});
.card {
  margin: 5px;
  width: 140px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#operatorImage>img {
  width: 100px;
  height: 50px;
}

.choice {
  border: 3px #CA0B00 solid;
  text-decoration: none;
}

.operator-card {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="default-0" class="operator-card col-md-4">
  <div class="col-xl-12 col-md-12  mb-4 ">
    <div class="card border-left-danger shadow h-100 py-2 selects">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
          </div>
          <div class="col-auto" id="operatorImage">
            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div id="default-2" class="operator-card col-md-4">
  <div class="col-xl-12 col-md-12  mb-4 ">
    <div class="card border-left-danger shadow h-100 py-2 selects">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
          </div>
          <div class="col-auto" id="operatorImage">
            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
          </div>
        </div>
      </div>
    </div>
1 голос
/ 18 апреля 2020

Что-то вроде этого? 

var $selects = $('.selects');

$selects.click(function() {
  $selects.not(this).removeClass('choice').hide();
  $(this).addClass('choice');
});

только что протестировано, и это работает ... но вам придется удалить это важное в css: 

display: flex !important;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...