Помогите разобраться с jQuery

Menro · 17 Ноя 2016

Доброй ночи!
Нужна помощь.
Я что-то принципиально не понимаю, поэтому если не сложно, разъясните мне как это работает!

Вот есть например такой HTML:

HTML:

<div class="item">
<div style="display:none;" class="description-content">Контент</div>
<div id="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
<div style="display:none;" class="description-content">Контент</div>
<div id="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
<div style="display:none;" class="description-content">Контент</div>
<div id="showHideContent">Скрыть/Показать</div>
</div>

И вот такой скрипт:

HTML:

<script>
    jQuery(document).ready(function(){
    jQuery('#showHideContent').click(function () {
        if (jQuery('#description-content').is(':hidden')) {
        jQuery('#description-content').show('slow');
        } else {
        jQuery('#description-content').hide('slow');
        }
return false;
});
});
</script>

Итого, как Вы правильно поняли, скрипт делает div description-content видимым при клике на кнопку и наоборот. Здесь у меня как бы работает всё, но...

Работает только для первого item в моём случае. Что я сделал не так?

Скрытое содержимое доступно для зарегистрированных пользователей!

Клик по кнопке описания только для первого товара показывает его, для остальных товоров скрипт не срабатывает. И если не сложно объясните мне, как jQuery понимает, что я хочу открыть именно тот description-content, который находится в том же диве, что и кнопка показа?

borodatych · 17 Ноя 2016

1. ID на странице должен быть уникальным
2. Надо выбирать контент относительно нажатой кнопки

HTML:

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<script>
$(function(){
    $('.showHideContent').click(function () {
        var $content = $(this).prev();
        if( $content.is(':hidden')) $content.show('slow');
        else  $content.hide('slow');
    
        return false;
    });
});
</script>

Menro · 17 Ноя 2016

borodatych написал(а):

1. ID на странице должен быть уникальным
2. Надо выбирать контент относительно нажатой кнопки

HTML:

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<div class="item">
    <div style="display:none;" class="description-content">Контент</div>
    <div class="showHideContent">Скрыть/Показать</div>
</div>

<script>
$(function(){
    $('.showHideContent').click(function () {
        var $content = $(this).prev();
        if( $content.is(':hidden')) $content.show('slow');
        else  $content.hide('slow');
   
        return false;
    });
});
</script>

Спасибо!
По второму пункту я понял, что нужно выбирать относительно нажатой кнопки. А вот про уникальный ID, не понял, в вашем примере нет совсем ID.
Ну и под конец, этот вариант не сработал...
Не понял, что означает :hidden, slow...
Извините за кретинизм...

borodatych · 17 Ноя 2016

1. Все работает - Для просмотра ссылки Войди или Зарегистрируйся
2. В вашем примере было три одинаковых ID, я просто сделал классы
3. .is(':hidden') - проверяет виден ли объект
4. .hide('slow')/.show('slow'), где slow - это скорость анимации (600/400/200 <==> "slow","normal","fast")

borodatych · 17 Ноя 2016

Для просмотра ссылки Войди или Зарегистрируйся

Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Menro · 19 Ноя 2016

Спасибо!
Я понял всё!
Последний вопрос.
.prev() - ищет только в области родительского дива.
Как быть если структура например такая?

HTML:

<div class="item">
<div class="prosto">
<div class="hide">Скрытый блок</div>
</div>
<div class="prosto1"></div>
<div class="prosto2">
<div class="showcontent">Показать/Скрыть</div>
</div>
</div>

Мне бы идеально найти и открыть нужный div, который находится внутри текущего item, независимо от того куда он вложен.
Пробовал .closest, видимо тоже не то, что нужно.

borodatych · 19 Ноя 2016

Как то Для просмотра ссылки Войди или Зарегистрируйся:

HTML:

<style>.hide{ display: none; }</style>
<div class="item">
    <div class="prosto">
      <div class="hide" id="hide1">Скрытый блок</div>
    </div>
    <div class="prosto1"></div>
    <div class="prosto2">
        <div class="showcontent" data-hideid="#hide1">Показать/Скрыть</div>
    </div>
</div>
<div class="item">
    <div class="prosto">
      <div class="hide" id="hide2">Скрытый блок</div>
    </div>
    <div class="prosto1"></div>
    <div class="prosto2">
        <div class="showcontent" data-hideid="#hide2">Показать/Скрыть</div>
    </div>
</div>
<div class="item">
    <div class="prosto">
      <div class="hide" id="hide3">Скрытый блок</div>
    </div>
    <div class="prosto1"></div>
    <div class="prosto2">
        <div class="showcontent" data-hideid="#hide3">Показать/Скрыть</div>
    </div>
</div>
<script>
$(function(){
    $('.showcontent').click(function (){
        var hideid = $(this).data('hideid'), $content = $(hideid);
        if( $content.is(':hidden')) $content.show('slow');
        else  $content.hide('slow');
  
        return false;
    });
});
</script>

Фантазируйте, не стесняйтесь...

Menro · 19 Ноя 2016

Всё, решил!

HTML:

jQuery(this).parent().prev().children('.мой див');

borodatych · 19 Ноя 2016

Menro написал(а):
Всё, решил!

HTML:

jQuery(this).parent().prev().children('.мой див');

Такой подход хорош, когда это идет внутри закрытого модуля/плагина, и вы знаете что структура не поменяется, если кто то не решит с умничать, ну тогда сам себе буратино.
Для сайта лучше выбрать подход что предложил выше.
Если ID уже занято, используйте data атрибут.

Sergiy_ · 25 Ноя 2016

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

Код:

/**
     * Show
     * @param {MouseEvent|TouchEvent} e
     * @param {Boolean} testMouseOver
     */
    EasyZoom.prototype.show = function(e, testMouseOver) {
        var w1, h1, w2, h2;
        var self = this;

        if (! this.isReady) {
            this._load(this.$link.attr('href'), function() {
                if (self.isMouseOver || !testMouseOver) {
                    self.show(e);
                }
            });

            return;
        }

        this.$target.append(this.$flyout);

        w1 = this.$target.width();
        h1 = this.$target.height();

        w2 = this.$flyout.width();
        h2 = this.$flyout.height();

        dw = this.$zoom.width() - w2;
        dh = this.$zoom.height() - h2;

        rw = dw / w1;
        rh = dh / h1;

        this.isOpen = true;

        if (this.opts.onShow) {
            this.opts.onShow.call(this);
        }

        if (e) {
            this._move(e);
        }
    };

Помогите разобраться с jQuery

Menro

web, seo, email, hack

borodatych

Постоялец

Menro

web, seo, email, hack

borodatych

Постоялец

borodatych

Постоялец

Menro

web, seo, email, hack

borodatych

Постоялец

Menro

web, seo, email, hack

borodatych

Постоялец

Sergiy_

Постоялец