(Решено)Подскажите по коду jquery

Главные вкладки

DarKaind 12 ноября 2016 в 19:40

Собственно наконец-то решил разобраться с jquerry, но не могу начать, вот в упор не понимаю, как сделать так, чтоб выполнялся простейший код, именно чтоб при чего-то там на такой-то класс, выполнялась такая-то хрень.
Впихнул в файл .info
scripts[] = my-js/structur.js
соответственно рядом в папке my-js файл structur.js. Вот, если не трудно, может мне кто написать код, который нужно вставить в этот файл, чтобы например на моем сайте при наведении на ссылку в последней новости "Обновленный FF – Ferrari GTC4 Lusso" высветился какой-то текст, то бишь выполнилось например alert("тект"). Я тупо не могу дать старт на такой фигне, помогите пожалуйста
Спасибо
Собственно разобрался как кодить, чтоб работало, надо уже практиковаться. Но проблемы с подключением из внешнего файла. Через js injector не удобно, хочу все таки в блокнотике код писать.
Не подключается через .info файл темы, вот не хочет работать... Тут как бы не настаиваю, просто в чем может быть причина?
Так то сейчас подключил через page.tpl.php, <script type="text/javascript" src="/sites/all/themes/zen/js/structure.js"></script>, это работает.
Кстати, а можно подключить папку, чтоб из нее все скрипты брались, не прописывая каждый файл отдельно?
Собственно что я делаю. Есть вроде как таблица (таблица, чтоб центрировать без проблем), в этой таблице 5 строчек по 2 графы, но одна графа скрыта(display:none, через css) и видно только одну. Хочу реализовать, чтобы при наведении курсора на зону таблицы видимая графа заменялась на невидимую.
Что я делаю, вариант первый:

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

      $('.views-structure .views-table tr').mouseover(function () {

$(this).children('.views-structure .views-field-name').hide(1000),

$(this).children('.views-structure .views-field-name-1').show(1000)

 });

        }

  };

})(jQuery);

Но в этом варианте процесс исчезновения и появления у этих граф происходит одновременно, и таблицу немного корежит в процессе анимации. Второй вариант:

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

      $('.views-structure .views-table tr').mouseover(function () {

$(this).children('.views-structure .views-field-name').fadeOut(1000, function(){

        $(this).children('.views-structure .views-field-name-1').show(1000)})

 });

        }

  };

})(jQuery);

Этот не хочет работать, как я понял из-за второго $(this), он пытается взять уже из .views-structure .views-field-name, а не из таблицы, как первый раз. Если этот this удалить и оставить только $('.views-structure .views-field-name-1'), то этот .views-field-name-1 активируется во всех ячейках таблицы, а надо чтоб только в той, на которую навожу.
Собственно в первом варианте код работает там где надо (там куда навожу), но анимация происходит одновременно, и в таблице какое-то время имеются оба элемента из-за чего ее корежит, а во втором варианте вроде как сначала пропадает потом появляется, но во всех ячейках, я не могу иерархии элементов разобраться, как надо организовывать...

Сорри, нет особо времени вникать и исследовать отдельные сайты.
Напишите конкретный пример здесь, по примеру того что я предоставил выше. Приведите пример структуры и что нужно с ней сделать.

DarKaind 12 ноября 2016 в 20:55

да что исследовать, я ссылку выше дал, там по центру заголовок новости, я хочу, чтоб тупо наведя на этот заголовок выводился alert, чтоб понять, что нужно прописать, чтоб код понял что обращаются к этому заголовку...
Для css я допустим

.general-last-news-panel .title

{background:url("http://darkaind.ru/sites/all/themes/zen/css/img/gradient-bg.png") 0px 0 repeat-x transparent;

 padding:10px 5px;}

пишу, чтоб в этом заголовке фон и отступы настроить.
В js файл вставляю допустим эту хрень, при наведении ничего не происходит. Явно тут не как в ксс к классу приделывается...

(function ($) {

  Drupal.behaviors.myJsStructur = {

    attach: function (context, settings) {

      $(function(){

    $('.general-last-news-panel .title').hover(function(){

        alert('текст');

    });

});     

    }

  };

})(jQuery);

bumble 12 ноября 2016 в 21:01

DarKaynd wrote:

Явно тут не как в ксс к классу приделывается...

В подавляющем большинстве случаев - именно как в CSS.

У Вас сработает, если правильно написать:

(function ($) {

  Drupal.behaviors.myJsStructur = {

    attach: function (context, settings) {

      $('.general-last-news-panel .title').hover(function () {

        alert('текст');

      });

    }

  };

})(jQuery);

DarKaind 12 ноября 2016 в 20:59

Так, стопэ. Если этот код вставить в js injector, он работает, значит проблема в подключаемом файле... Ну ладно, спасибо за участие))

bumble 12 ноября 2016 в 21:01

Кеш не забывайте.

dgastudio 12 ноября 2016 в 21:02

агрегацию вырубите для начала

$('.general-last-news-views-css').click(function(e){
alert('test');
})

DarKaind 12 ноября 2016 в 21:10

Блин, оно не работает из файла, подключенного в тему через .info, css-ки работают...
Так, по порядку, все ли я так делаю?
Имею папку с темой, конкретно zen, в ней файл zen.info, в него я втыкаю ксски и jsки, конкретно в папке с темой есть папка myjs в ней лежит файл structur.js, в файле zen.info я пишу scripts[] = myjs/structur.js, правильно? Есть ли разница в какой части документа писать, я после cssок вставил, между регионом..
в этот файл я вставляю код выше

(function ($) {

  Drupal.behaviors.myJsStructur = {

    attach: function (context, settings) {

      $(function(){

    $('.general-last-news-panel .title').hover(function(){

        alert('текст');

    });

});     

    }

  };

})(jQuery);

Если его вставить в модуль js injecrot, то он работает, а если в этот файл, то нет...
ps, кэш чищу

bumble 12 ноября 2016 в 21:24

Я же выше привел код с правками.

dgastudio 12 ноября 2016 в 21:11

у вас js сыпится с ошибкой
http://c2n.me/3EkkYuu.png

DarKaind 12 ноября 2016 в 21:15

через инжектор работает, а через файл нет...

DarKaind 12 ноября 2016 в 21:19

Ладно народ, забейте, спасибо) Я по коду все понял - прост изначально ничего не работало, вот и не получалось ^_^, буду дальше развиваться, а с подключением разберусь, не забивайте голову.
Спасиб еще раз за участие

gun_dose 12 ноября 2016 в 23:04

DarKaynd wrote:

буду дальше развиваться

Вот за это респект))

DarKaind 13 ноября 2016 в 21:24

Собственно разобрался как кодить, чтоб работало, надо уже практиковаться. Но проблемы с подключением из внешнего файла. Через js injector не удобно, хочу все таки в блокнотике код писать.
Не подключается через .info файл темы, вот не хочет работать... Тут как бы не настаиваю, просто в чем может быть причина?
Так то сейчас подключил через page.tpl.php, <script type="text/javascript" src="/sites/all/themes/zen/js/structure.js"></script>, это работает.
Кстати, а можно подключить папку, чтоб из нее все скрипты брались, не прописывая каждый файл отдельно?

gun_dose 13 ноября 2016 в 21:31

Вы точно тот кэш чистите?

DarKaind 13 ноября 2016 в 21:33

да, каждый раз

DarKaind 13 ноября 2016 в 22:11

Вот тут на модуль наткнулся, как будто то что мне надо, чтоб jsки тупо в папку кидать, только чет не понимаю, какой там путь и относительно чего... модуль Autoload JS

Все, проехали, надо было в папке js в папке с темой папки создавать, типа all и т.д чтоб работало, я первый раз их путь буквально воспринял, а второй раз просто в папку js пытался скрипты пихнуть и не работало)

DarKaind 14 ноября 2016 в 23:05

Собственно что я делаю. Есть вроде как таблица (таблица, чтоб центрировать без проблем), в этой таблице 5 строчек по 2 графы, но одна графа скрыта(display:none, через css) и видно только одну. Хочу реализовать, чтобы при наведении курсора на зону таблицы видимая графа заменялась на невидимую.
Что я делаю, вариант первый:

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

      $('.views-structure .views-table tr').mouseover(function () {

$(this).children('.views-structure .views-field-name').hide(1000),

$(this).children('.views-structure .views-field-name-1').show(1000)

 });

        }

  };

})(jQuery);

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

      $('.views-structure .views-table tr').mouseover(function () {

$(this).children('.views-structure .views-field-name').fadeOut(1000, function(){

        $(this).children('.views-structure .views-field-name-1').show(1000)})

 });

        }

  };

})(jQuery);

DarKaind 15 ноября 2016 в 9:19

Ну блииин, первый раз я просто вообще не понимал как чего, нужен был простейший пример чтоб хоть что то делал... Потом выяснилось что я все правильно делал, просто почему то из .info скрипт не подключался.
А сейчас я с иерархией не могу разобраться, чтобы работало в том месте куда я мышкой навожу, а не все элементы с этим классом срабатывали. Ну частично разобрался, $(this), но если функцию продолжать, как я второй раз написал, то там косяк

gun_dose 15 ноября 2016 в 9:40

this - довольно своеобразная переменная. Она означает текущий объект, к которому применен метод. В вашем примере вложенный this - это уже views-stucture-что-то-там. В вашем случае, чтобы ничего не дёргалось нужно по началу анимации давать появляющемуся элементу позишн абсолют и ставить его ровно на место исчезающего, появления и пропадание делать через opacity и уже по окончании анимации давать новому элементу позишн статик, а старый прятать через hide()

DarKaind 15 ноября 2016 в 14:06

Мне не нравится абсолютное позиционирование, там корежит на разных размерах. Сделал немного наверно не правильно, можно былоб попроще, но мозгов не хватает

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

      $('.views-structure .views-table tr').mouseover(function () {

$(this).children('.views-structure .views-field-name').fadeOut(1000,

function (){

        $('.views-structure .views-table tr').mouseover(function() {

                $(this).children('.views-structure .views-field-name-1').show(1000)

        }

        )

}

)

 });

        }

  };

})(jQuery);

Тут что, идет выполнение исчезновения "чилда" в "родителе" таблицы, в этой же функции потом идет аналогичный код, только появление "чилда" в "родителе таблицы. Проблема в этом коде такая, что как надо работает только одна кнопка, которая была первая при наведении, остальные корежатся как в моем первом варианте, но вот первая, на которую навел работает как надо

DarKaind 15 ноября 2016 в 15:27

Сделал через opacity:0, и абсолютным позиционированием, раз до другого додумать пока не получается, может как-нить потом)
Но блин, тут тоже не все так хорошо. Значит конечная цель, есть поле 1 и поле 2 в таблице, как написал выше. При наведении мышки появляется поле 2, а поле 1 скрывается, если мышку отвезти то обратно:, 2 исчезает, 1 появляется.
Значит с ксске отпозиционировал поле 2, и задал opacity:0, скрипт наговнокодил:

(function ($) {

  Drupal.behaviors.myJsStructure = {

    attach: function (context) {

$('.views-structure .views-table tr').mouseover(function () {

 $(this).children('.views-structure .views-field-name').fadeTo(1000, 0),

 $(this).children('.views-structure .views-field-name-1').fadeTo(1000, 1)

 });

$('.views-structure .views-table tr').mouseout(function () {

 $(this).children('.views-structure .views-field-name').fadeTo(1000, 1),

 $(this).children('.views-structure .views-field-name-1').fadeTo(1000, 0)

 }); 

        }

  };

})(jQuery);

И значит оно вроде бы работает, но иногда по несколько раз пропадает и появляется...

gun_dose 15 ноября 2016 в 15:49

DarKaynd wrote:

И значит оно вроде бы работает, но иногда по несколько раз пропадает и появляется...

Погуглите про once и behaviors

sergeybelya 15 ноября 2016 в 16:07

http://api.jquery.com/fadeout/
https://s3.amazonaws.com/scrstorage/mx18116848v633u2.jpg

DarKaind 16 ноября 2016 в 16:42

английская документация мне фигово дается, так что Ваша ссылка мне не помогла. Но наткнулся на stop, и в результате кусок кода типа:

 $('.views-structure .views-table tr').mouseover(function(){

          $(this).children('.views-structure .views-field-description').stop().fadeTo(600, 1);

});

Решил мою проблему)

sergeybelya 16 ноября 2016 в 16:47

DarKaynd wrote:

английская документация мне фигово дается

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

DarKaind 16 ноября 2016 в 18:43

ну так то не только в вебе, но этой фигней я чисто так, как хобби занимаюсь, чисто для себя)

DarKaind 16 ноября 2016 в 19:42

Кстати, вот по fadeЩге, я так понял Вы мне хотели последовательность показать, типа .fadeOut(500, function (){ и тогда код будет работать последовательно. У меня выше был такой пример описан, я сказал, что он работает почему то только на первой кнопке, последующие начинают срабатывать одновременно....

Drupal Drupal на русском

(Решено)Подскажите по коду jquery

Главные вкладки

Комментарии