Форум

kvizor34 · #1 (**permalink**) 16.02.2018, 10:32

Значит вот этот скрипт работает без нареканий:

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 раз, уже голову сломал, КОД ТОТ-ЖЕ САМЫЙ - что с ним не так?

ksa · #2 (**permalink**) 16.02.2018, 10:41

Сообщение от kvizor34

что с ним не так?

Неужели так трудно сделать простенький тестовый пример?

ksa · #3 (**permalink**) 16.02.2018, 10:42

Сообщение от kvizor34

Но он не работает

this внутри внешних функций не такой как в калбэк-функциях...

kvizor34 · #4 (**permalink**) 16.02.2018, 10:44

Сообщение от ksa

this внутри внешних функций не такой как в калбэк-функциях...

вот как это? я не понял) поясните пожалуйста

ksa · #5 (**permalink**) 16.02.2018, 10:47

Сообщение от kvizor34

поясните пожалуйста

Пример тестовый делай - на нем и покажу.

ksa · #6 (**permalink**) 16.02.2018, 10:51

Сообщение от kvizor34

поясните пожалуйста

Если пример тебе делать лень - читай статейку про превратности изменчивого this .

https://getinstance.info/articles/ja...in-javascript/

kvizor34 · #7 (**permalink**) 16.02.2018, 11:14

Сообщение от ksa

Пример тестовый делай - на нем и покажу.

https://jsfiddle.net/kvizor/4vsoqbqd/12/
Там ниже в js блоке, закомментированный код - тот который не работает

Nexus · #8 (**permalink**) 16.02.2018, 11:21

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

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

kvizor34 · #9 (**permalink**) 16.02.2018, 11:34

Сообщение от Nexus

Может так?

Да, спасибо, заработало, и статью я прочитал про особенности использования this, объясните только, как в данном случае будет расцениваться вызов функций? Ведь по всем правилам её вызов должен сопровождаться "()"... Или я что-то не понимаю...

ksa · #10 (**permalink**) 16.02.2018, 11:38

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>

Форум

Справочник

Discord чат

Курсы javascript