Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   метод click внутри объекта (https://javascript.ru/forum/misc/54002-metod-click-vnutri-obekta.html)

forcej 27.02.2015 13:16

метод click внутри объекта
 
Здравствуйте, объясните пожалуйста наглядно почему в данном примере событие click отказывается работать и как правильно реализовать подобный механизм внутри объекта?

function Dobj(d_class) {
    
    this.dTitle = $(d_class + " h1")
    this.dBody = $(d_class + " p")

    $(this.dTitle).click(this.move)

    this.move = function() { 
      $(this.dBody).hide()
    }
     
}


$( document ).ready(function() {        
  var d = new Dobj(".d_class")
});

ksa 27.02.2015 13:24

forcej, встречные вопросы...

К чему такие "связки"?
this.dTitle = $(d_class + " h1")
// и
$(this.dTitle).click() 
///
this.dBody = $(d_class + " p")
// и
$(this.dBody).hide()

Откуда появилось?
this.move


И где полный тестовый пример?

forcej 27.02.2015 13:40

Цитата:

Сообщение от ksa (Сообщение 358785)
forcej, встречные вопросы...

К чему такие "связки"?
this.dTitle = $(d_class + " h1")
// и
$(this.dTitle).click() 
///
this.dBody = $(d_class + " p")
// и
$(this.dBody).hide()

Откуда появилось?
this.move


И где полный тестовый пример?

Связки для того что бы в дальнейшем можно было наследовать от Dobj имея в потомках базовые свойства которых будет больше. this.move определяется ниже, такая запись не корректна для конструктора? к слову если вызывать click после определения move он по прежнему не работает. Это полный тестовый, остальное пока в голове

ksa 27.02.2015 13:44

Цитата:

Сообщение от forcej
this.move определяется ниже, такая запись не корректна?

Этого свойства на тот момент просто нет.

Цитата:

Сообщение от forcej
Связки для того что бы в дальнейшем можно было наследовать от Dobj

Т.е. дважды совать элемент-жиквери в жиквери эт так надо для наследования? :blink:
Цитата:

Сообщение от forcej
Это полный тестовый, остальное пока в голове

Это просто огрызок кода и не более того...

forcej 27.02.2015 13:51

<html> 
     <head> 
          <title>html для примера</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script src="script.js"></script>         
     </head> 
     <body>     
          <div class="d_class"> 
              <h1>TITLE</h1>
               <P>
                   содержимое<br>
              </P>
          </div>          
     </body> 
</html>


function Dobj(d_class) {
    this.cont = $(d_class)
    this.dTitle = this.cont.find("h1")
    this.dBody = this.cont.find("p") 

    this.move = function() { 
      $(this.dBody).hide()
    }
     
    $(this.dTitle).click(this.move)
}


$( document ).ready(function() {        
  var d = new Dobj(".d_class")
});



Хорошо, понял вас. Исправил то о чём вы говорите, почему этот огрызок не работает теперь при инициализации экземпляра d? и как сделать правильно, чтобы заработал ?)

ksa 27.02.2015 14:09

Цитата:

Сообщение от forcej
почему этот огрызок не работает теперь при инициализации экземпляра d?

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

Что ты вообще собираешься замастырить?

forcej 27.02.2015 14:21

Цитата:

Сообщение от ksa (Сообщение 358805)
По огрызкам не всегда понятно почему они не работают... Ты в состоянии сделать полный тестовый пример?
Что ты вообще собираешься замастырить?

Ну конечно, в состоянии. Просто скажи что ты подразумеваешь под полным тестовым?) На данном этапе я собираюсь сделать несколько классов потомков, которые будут работать с похожими html данными но немного отличаться в поведением. Например переопределю move для двух других потомков, чтобы они скрывали <p> иначе.

forcej 27.02.2015 14:22

Цитата:

Сообщение от ksa (Сообщение 358805)
По огрызкам не всегда понятно почему они не работают...

Мне бы понять почему click не хочет работать внутри объекта.

forcej 27.02.2015 14:24

Цитата:

Сообщение от ksa (Сообщение 358805)
полный тестовый пример

в плане загрузить всё это барахло на какой-нибудь тестовый сервис? дык, сейчас сделаю.

ksa 27.02.2015 14:25

Цитата:

Сообщение от forcej
Мне бы понять почему click не хочет работать внутри объекта.

А я пока не в стоянии даже потестить твое изобретение...

ksa 27.02.2015 14:25

Цитата:

Сообщение от forcej
в плане загрузить всё это барахло на какойни-будь тестовый сервис?

Выкладывай прямо тут. Его тут можно будет запустить и посмотреть... ;)

forcej 27.02.2015 14:32

сделал пример на jsfiddle.net http://jsfiddle.net/u4no7dwj/

forcej 27.02.2015 14:33

Цитата:

Сообщение от ksa (Сообщение 358815)
Выкладывай прямо тут. Его тут можно будет запустить и посмотреть... ;)

не знал что тут есть такой кейс, первый раз пишу на этот форум)

рони 27.02.2015 14:36

forcej,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       function Dobj(d_class) {

    this.dTitle = $(d_class + " h1");
    this.dBody = $(d_class + " p");
    this.move = function() {
      $(this.dBody).toggle()
    }
    $(this.dTitle).click(this.move.bind(this))
    $(this.dTitle).trigger('click')

}
  var d = new Dobj(".d_class")
});


  </script>
</head>

<body class="d_class">
<h1>click</h1>
<p>hide</p>
</body>

</html>

ksa 27.02.2015 14:39

Цитата:

Сообщение от forcej
не знал что тут есть такой кейс

Вот тебе ответ и решение... ;)

<!DOCTYPE html>
<html>
<head>
<script src='http://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>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function Dobj(d_class) {
	this.cont = $(d_class)
	this.dTitle = this.cont.find("h1")
	this.dBody = this.cont.find("p");
	var o=this.dBody;
	this.move = function() { 
		alert(this.dBody)
		o.hide();
	};
	$(this.dTitle).click(this.move);
};
$(function(){        
  var d = new Dobj(".d_class")
});
</script>
</head>
<div class="d_class"> 
	<h1>TITLE</h1>
	<P>
		содержимое<br>
	</P>
</div>          
</body>
</html>


P.S.
Перестань пихать жиквери-элементы в жиквери... ;)

forcej 27.02.2015 14:55

ksa, Понял, проблема в области видимости. Спасибо.

forcej 27.02.2015 14:58

рони, $(this.dTitle).click(this.move.bind(this)) вы немогли бы чуть более подробно объяснить как это работает?

ksa 27.02.2015 15:07

Цитата:

Сообщение от forcej
$(this.dTitle).click(this.move.bind(this)) вы немогли бы чуть более подробно объяснить как это работает?

Вот статейка
http://learn.javascript.ru/bind

рони 27.02.2015 15:08

Цитата:

Сообщение от forcej
this.move.bind(this)

bind задаёт контекст в котором работает функция
Привязка контекста (this) к функции в javascript и частичное применение функций

forcej 27.02.2015 15:18

Цитата:

Сообщение от ksa (Сообщение 358833)
Вот статейка
http://learn.javascript.ru/bind

Цитата:

Сообщение от рони (Сообщение 358834)

Большое спасибо.


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