Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Непонятки с событием click... (https://javascript.ru/forum/events/72668-neponyatki-s-sobytiem-click.html)

kvizor34 16.02.2018 10:32
Непонятки с событием 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 раз, уже голову сломал, КОД ТОТ-ЖЕ САМЫЙ - что с ним не так?

ksa 16.02.2018 10:41
Цитата:
Сообщение от kvizor34
что с ним не так?
Неужели так трудно сделать простенький тестовый пример? :(

ksa 16.02.2018 10:42
Цитата:
Сообщение от kvizor34
Но он не работает
this внутри внешних функций не такой как в калбэк-функциях... ;)

kvizor34 16.02.2018 10:44
Цитата:
Сообщение от ksa (Сообщение 478329)
this внутри внешних функций не такой как в калбэк-функциях... ;)
вот как это? я не понял) поясните пожалуйста

ksa 16.02.2018 10:47
Цитата:
Сообщение от kvizor34
поясните пожалуйста
Пример тестовый делай - на нем и покажу. :D

ksa 16.02.2018 10:51
Цитата:
Сообщение от kvizor34
поясните пожалуйста
Если пример тебе делать лень - читай статейку про превратности изменчивого this . ;)
https://getinstance.info/articles/ja...in-javascript/

kvizor34 16.02.2018 11:14
Цитата:
Сообщение от ksa
Пример тестовый делай - на нем и покажу.
https://jsfiddle.net/kvizor/4vsoqbqd/12/
Там ниже в js блоке, закомментированный код - тот который не работает

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

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

kvizor34 16.02.2018 11:34
Цитата:
Сообщение от Nexus
Может так?
Да, спасибо, заработало, и статью я прочитал про особенности использования this, объясните только, как в данном случае будет расцениваться вызов функций? Ведь по всем правилам её вызов должен сопровождаться "()"... Или я что-то не понимаю...

ksa 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>

ksa 16.02.2018 11:44
Цитата:
Сообщение от kvizor34
объясните только, как в данном случае будет расцениваться вызов функций?
Обычный вызов и все. Только this не сохраняется в ее контексте.

Вот вариант с сохранением контекста this
<!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);
    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).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.call(this);
    });
    $('.search-filter__box > li').click(function () {
		alert('Обработчик - '+this.tagName);
        selectboxselect.call(this);
    })
});
</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>

А можно его просто параметром передать при обычном вызове... ;)

<!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(Obj) {
	alert('Функция - '+Obj.tagName);
    var currentValue = $(Obj).parent().css("overflow");
    if (currentValue == "hidden") {
        $(Obj).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"});
    }
    else {
        $(Obj).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    }
}
function selectboxselect(Obj) {
	alert('Функция - '+Obj.tagName);
    $(Obj).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    $(Obj).parent().siblings("p").text($(Obj).text());
}
$(document).ready(function (){
    $('.search-filter > p.search-filter__value').click(function () {
		alert('Обработчик - '+this.tagName);
        selectboxopen(this);
    });
    $('.search-filter__box > li').click(function () {
		alert('Обработчик - '+this.tagName);
        selectboxselect(this);
    })
});
</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>

kvizor34 16.02.2018 12:08
Да, всё разобрался!
А вот теперь уважаемые форумчане, скажите можно ли продлить жизненный цикл авторизации на этом форуме???)

Nexus 16.02.2018 12:49
kvizor34, при авторизации отметьте галочку "запомнить меня" (или как-то так).
Сегодня второй раз за полтора года авторизовался.

kvizor34 16.02.2018 12:59
Цитата:
Сообщение от Nexus
или как-то так
А точно!)

ksa 16.02.2018 13:22
А если еще и браузеру "сказать", чтобы запомнил авторизацию на этом сайте - вообще проблем с этим не будет. ;)


Часовой пояс GMT +3, время: 21:25.