Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2018, 09:32
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Непонятки с событием click...
Значит вот этот скрипт работает без нареканий:

function selectbox() {
    $('.search-filter > p.search-filter__value').click(function () {
        var currentValue = $(this).parent().css("overflow");
        if (currentValue == "hidden") {
            $(this).parent().css({
                "overflow": "visible",
                "border-bottom-color": "transparent",
                "background-color": "#F9F9F9"
            });
            $(this).siblings('img').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"});
        }
        else {
            $(this).parent().css({
                "overflow": "hidden",
                "border-bottom-color": "#E5E5E5",
                "background-color": "transparent"
            });
            $(this).siblings("img").css({transform: "rotate(0deg)"});
        }
    })
    $('.search-filter__box > li').click(function () {
        $(this).parent().parent().css({
            "overflow": "hidden",
            "border-bottom-color": "#E5E5E5",
            "background-color": "transparent"
        });
        $(this).parent().siblings("img").css({transform: "rotate(0deg)"});
        $(this).parent().siblings("p").text($(this).text());
    })
}

$(document).ready(function (){
    selectbox()
});


Но я решил вынести оба события click за пределы их функции (selectbox), у меня получилось следующее:

function selectboxopen() {
    var currentValue = $(this).parent().css("overflow");
    if (currentValue == "hidden") {
        $(this).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"});
        $(this).siblings('img').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"});
    }
    else {
        $(this).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
        $(this).siblings("img").css({transform: "rotate(0deg)"});
    }
}

function selectboxselect() {
    $(this).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    $(this).parent().siblings("img").css({transform: "rotate(0deg)"});
    $(this).parent().siblings("p").text($(this).text());
}

$(document).ready(function (){
    $('.search-filter > p.search-filter__value').click(function () {
        selectboxopen()
    });
    $('.search-filter__box > li').click(function () {
        selectboxselect()
    })
});


Но он не работает (в консоли ошибок нет), я его перечитал 6 раз, уже голову сломал, КОД ТОТ-ЖЕ САМЫЙ - что с ним не так?
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2018, 09:41
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,105

Сообщение от kvizor34
что с ним не так?
Неужели так трудно сделать простенький тестовый пример?
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2018, 09:42
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,105

Сообщение от kvizor34
Но он не работает
this внутри внешних функций не такой как в калбэк-функциях...
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2018, 09:44
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Сообщение от ksa Посмотреть сообщение
this внутри внешних функций не такой как в калбэк-функциях...
вот как это? я не понял) поясните пожалуйста
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2018, 09:47
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,105

Сообщение от kvizor34
поясните пожалуйста
Пример тестовый делай - на нем и покажу.
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2018, 09:51
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,105

Сообщение от kvizor34
поясните пожалуйста
Если пример тебе делать лень - читай статейку про превратности изменчивого this .
https://getinstance.info/articles/ja...in-javascript/
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2018, 10:14
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Сообщение от ksa
Пример тестовый делай - на нем и покажу.
https://jsfiddle.net/kvizor/4vsoqbqd/12/
Там ниже в js блоке, закомментированный код - тот который не работает
Ответить с цитированием
  #8 (permalink)  
Старый 16.02.2018, 10:21
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,482

Может так?
https://jsfiddle.net/4vsoqbqd/14/

Upd. https://jsfiddle.net/0wtch9v2/

Последний раз редактировалось Nexus, 16.02.2018 в 10:32.
Ответить с цитированием
  #9 (permalink)  
Старый 16.02.2018, 10:34
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Сообщение от Nexus
Может так?
Да, спасибо, заработало, и статью я прочитал про особенности использования this, объясните только, как в данном случае будет расцениваться вызов функций? Ведь по всем правилам её вызов должен сопровождаться "()"... Или я что-то не понимаю...
Ответить с цитированием
  #10 (permalink)  
Старый 16.02.2018, 10:38
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,105

kvizor34, вот смотри, так понятно будет?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.search-filter{
    margin: 15px;
    display: block;
    color: #91959d;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border: 1px solid #444444;
    height: 40px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    user-select: none;
    width: 300px
}
.search-filter__value{
    color:  #91959d;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    padding-right: 30px;
    padding-left: 16px;
}
.search-filter__box {
    line-height: 40px;
    background-color: #fff;
}
.search-filter__box li{
    padding-right: 30px;
    padding-left: 16px;
}
.search-filter__box li:hover{
    background-color: #BBBBBB;
    color: #fff;
}
</style>
<script type='text/javascript'>
function selectboxopen() {
	alert('Функция - '+this.tagName);
	this.alert('Это объект window!');
    var currentValue = $(this).parent().css("overflow");
    if (currentValue == "hidden") {
        $(this).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"});
    }
    else {
        $(this).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    }
}
function selectboxselect() {
	alert('Функция - '+this.tagName);
	this.alert('Это объект window!');
    $(this).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    $(this).parent().siblings("p").text($(this).text());
}
$(document).ready(function (){
    $('.search-filter > p.search-filter__value').click(function () {
		alert('Обработчик - '+this.tagName);
        selectboxopen()
    });
    $('.search-filter__box > li').click(function () {
		alert('Обработчик - '+this.tagName);
        selectboxselect()
    })
});
</script>
</head>
<body>
<div class="search-filter">
	<p class="search-filter__value">Поручения&nbsp;и&nbsp;рекомендации</p>
	<ul class="search-filter__box">
		<li>Поручения&nbsp;и&nbsp;рекомендации</li>
		<li>Служебные&nbsp;переписки</li>
		<li>Распорядительные&nbsp;документы</li>
	</ul>
</div>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как по событию click function запустить lightbox функцию? cheizer jQuery 0 04.01.2018 23:09
draggable (запрет click для родителей компонента) khusamov ExtJS 5 13.04.2015 11:45
Помогите с событием click Dolphin48rus Общие вопросы Javascript 1 06.12.2014 18:40
проблема с событием click. morfie jQuery 1 14.10.2010 03:33
live click выполняется несколько раз hara jQuery 9 09.06.2010 09:58