Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2013, 12:38
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

Как получить index изображения?
Как получить index изображения, например вот так, но почему-то index иногда выдает не верное число, почему? ТО есть выдает index элемента в div а не в общем body.
<script type="text/javascript">
$(function(){
       $('.img').click(function(){
              alert($(this).index()+1);
              return false;
       });
});
</script>

<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="1.jpg" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="2.jpg" /></a>
        <a href="" class="img"><img src="3.jpg" /></a>
    </div>
</div>

Последний раз редактировалось jeysmook, 11.02.2013 в 13:00.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2013, 13:21
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="1.jpg" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="2.jpg" /></a>
        <a href="" class="img"><img src="3.jpg" /></a>
    </div>
</div>
<script type="text/javascript">
$(function(){
       $('img').click(function(){
              alert(parseInt($(this).attr('src')));
              return false;
       });
});
</script>


jQuery объект - это массив, добавив к нему index в данном случае вы получаете номер элемента. Во втором диве $('img').lenght = 2 вот вы и получаете 1-й и второй соответственно.
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2013, 13:50
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

tsigel,
а что не возможно получить индексы a.img, как бы считать только эти ссылки? И тем более если src="as.jpg", src="1233.jpg", src="32323sd.jpg", src="asdasdad223.jpg"
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2013, 13:56
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Я вижу 2 простых выхода:
1) После загрузки документа пройтись по всем картинкам/(ссылкам с картинками) и расставить им индексы например в name и далее работать с name как с индексом.
2) При каждом нажатии пробегаться по документу и пересчитывать картинки, пока не дойдете до текущей.
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2013, 14:01
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Более красивый выход - создать объект с картинкой, тогда индекс картинки можно писать сразу в её свойства.
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2013, 14:13
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="1.jpg" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="2.jpg" /></a>
        <a href="" class="img"><img src="3.jpg" /></a>
    </div>
</div>
<script type="text/javascript">

var Image = function ($dom, index) {
  this.$ = $dom;
  this.$.data('image', this);
  this.index = index;
  this.init();
};

Image.prototype.init = function () {
  this.$.click(this.handlers.click);
};

Image.prototype.handlers = {
  click: function() {
       var image = $(this).data('image');
       alert(image.index);
       return false;
     }
};

$(function(){ 
       var index = 0;
       $('.img').each(function() {
          var image = new Image($(this), index)
          index++;
        })
});
</script>

Последний раз редактировалось tsigel, 11.02.2013 в 14:40.
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2013, 14:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

tsigel, кто вас научил модифицировать прототипы встроенных объектов?
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2013, 14:33
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

danik.js,
Никто не учил. Я осваиваю скрипт 3-й месяц по учебнику с этого сайта.

А что, я что-то не так написал?
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2013, 14:42
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

tsigel, не стоит изменять прототипы встроенных объектов. По крайней мере не подавайте плохой пример другим.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="1.jpg" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="2.jpg" /></a>
        <a href="" class="img"><img src="3.jpg" /></a>
    </div>
</div>
<script>
    var $images = $('.img');
    var images = $images.toArray();
    $images.click(function(e){
        var index = images.indexOf(this);
        alert(index);
        e.preventDefault();
    });
</script>
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2013, 14:46
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

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

Назови я объект, скажем, "Img" или "aImg" вопросов бы не было?

Последний раз редактировалось tsigel, 11.02.2013 в 14:49.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как из строки содержащей namespace получить ссылку на объект? wwwboy Общие вопросы Javascript 2 07.12.2011 09:22
Как получить значение TD zsaz jQuery 3 16.11.2011 16:00
как получить загружений урл iframe или frame NOCaut Events/DOM/Window 0 15.11.2011 14:51
Как получить raw data с image? lyapharov Общие вопросы Javascript 2 07.04.2011 00:20
Динамически увеличивающиеся изображения: как реализовать? cforest Events/DOM/Window 6 24.06.2009 17:16