Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2016, 16:17
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Не могу правильно выбрать селектор
Всем привет народ!

Есть страница http://youran88.hol.es/

Там есть слайдер. Мне надо его довести до ума, а именно сделать так, чтобы центральный элемент слайдера был размером больше остальных. Картинка сама чтоб была больше, текст и кнопка тоже больше. Ну и чтоб всё корректно работало при переключении стрелок "вперёд"-"назад".

Слайдер сам - bxslider. В инете готового прям под мою задачу слайдера я не нашёл, поэтому взял этот. А центральный элемент думаю средствами jQuery уже увеличивать.

Так вот, bxslider тем элементам, которые скрыты, добавляет класс
.bx-clone Народ, как мне с помощью jQuery выбрать только элементы с классом .slide ??

Именно только с одним классом, не с двумя. А то пока получается выбрать либо все 9 элементов с классом .slide, либо только элементы с классом .bx-clone. Мне как бы надо вычеркнуть из элементов с классом .slide те элементы, которые состоят из двух классов одновременно, т.е. slide bx-clone.

Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2016, 16:19
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Вот тут пример как выбрать элемент, который обладает двумя или более классами одновременно: http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80_% D0%BF%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%83

А вот как найти элемент, у которого строго 1 класс?
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2016, 16:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от fenix_63
как мне с помощью jQuery выбрать только элементы с классом .slide ?
Так

var obj=$('.slide');
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2016, 17:47
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от fenix_63
Именно только с одним классом, не с двумя.
можно так
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>

  <div class="xxx yyy">class: xxx yyy</div>
  <div class="xxx">class: xxx</div>
  <div class="yyy">class: yyy</div>
  
  <script>
    $('.xxx').css('color', 'red'); // выбирает два элемента
    $('.xxx').not('.yyy').css('background-color', 'green'); // выбирает один элемент
    $('[class="yyy"]').css('background-color', 'silver'); // либо так выбирает один элемент
  </script>

</body>
</html>

Последний раз редактировалось Pavel M., 03.10.2016 в 17:57.
Ответить с цитированием
  #5 (permalink)  
Старый 05.10.2016, 20:40
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

оо, спасибо, буду тестировать
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2016, 13:02
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

можно и так
$('.xxx:not(.yyy)')

вариантов думаю много
Ответить с цитированием
  #7 (permalink)  
Старый 07.10.2016, 22:25
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Да, это действительно работает, спасибо.
А может кто-нибудь знает, как сделать, чтобы центральный элемент слайдера был увеличенным? Фотка, шрифты. Стили то прописать я смогу, а вот с jQuery-выделением нужного элемента пока не получается.

Пока выделаю видимые 3 слайда, потом 2-му (центральный) назначаю CSS-стили - ширину побольше делаю самого слайда, и ширину картинки слайда тоже больше. Но проблема в том, чтоб при клине на стрелку "Вправо" не всегда увеличивается нужный слайд. Там ещё при пролистывании текущий слайд уходит влево (например), и его обратно уменьшить надо.

В разделе head у меня вот это пока:

<script>
      $(document).ready(function(){
          $(".bx-next").click(function () {
            //alert('Нажата кнопка Вперед');
      
            var $zooming_element = $('.slide:not(.bx-clone)');
      
            //Элемент, который надо увеличить
           $target=$zooming_element[1];
           $($target).css({
               'width':'300'+'px',
               'height':'auto'
               }
           );
      
           $($target).children('img').css({
               'width':'100'+'%',
               'height':'100'+'%'
           });
      
          });
      });
      
    </script>


Всю верстку вот сюда выложил: http://youran88.hol.es/

В идеале слайдер вот так должен выглядеть:

Помогите пожалуйста, кто знает.
Ответить с цитированием
  #8 (permalink)  
Старый 07.10.2016, 22:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

fenix_63,
<style type="text/css">
   .slider4  .slide {
     transform: scale(.8);
     transition: all 1.2s;
   }
   .slider4  .slide.big {
     transform: scale(1.2);
   }

    </style>
    <script>
      $(document).ready(function(){
        $('.slider4').bxSlider({
          pager:false,
          slideWidth: 215,
          minSlides: 2,
          maxSlides: 3,
          moveSlides: 1,
          slideMargin: 10,
          onSlideAfter : function($slideElement, oldIndex, newIndex){
          $(".slider4  .slide").removeClass("big").eq(4+newIndex).addClass("big")
           }
         }).find(".slide").eq(4).addClass("big");
      })
    </script>
Ответить с цитированием
  #9 (permalink)  
Старый 07.10.2016, 23:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от fenix_63
В разделе head у меня вот это пока:
убрать
Ответить с цитированием
  #10 (permalink)  
Старый 08.10.2016, 19:09
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

работает, но увеличивается постоянно только один элемент, остальные - без изменения: http://youran88.hol.es
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
делегированно выбрать не могу Megokryak jQuery 3 28.03.2014 10:26
не могу выбрать элемент alex2012 AJAX и COMET 2 05.11.2012 02:15
Не могу выбрать и удалить клонируемые элементы AlexPrm jQuery 6 30.05.2010 15:58
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 21:34
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20