jQuery index для выбора индекса x для индекса y - PullRequest
Новая
       24

jQuery index для выбора индекса x для индекса y

1 голос
/ 10 сентября 2011

Вот моя проблема, у меня есть куча div: 

<div id="maincontent">
    <div class="imgPrev">...</div>
    <div class="imgPrev">...</div>

    [...]
</div>

Я хочу нажать на div imgPrev, затем нажать shift (e.shiftKey) и нажать на другой div imgPrev, чтобы сделать всеdiv между ними, включая те два полупрозрачных (как будто они выбраны.

Я пытался получить индекс, но всегда получаю -1 как индекс.

Я уже читал документацию по jQuery о.index, но все еще не работает.

Кто-нибудь знает, как это работает?

РЕДАКТИРОВАТЬ

Полный код ниже:) 

<div id="maincontent">

<div class="imgPrev"><input type="checkbox" name="red-box" value="1" />
    <img src="./photos/unsorted/1.jpg" height="120" class="imgshadow" id="11" photoId="20" iW="1920" iH="1200" name="1.jpg" size="467972"/>
    1.jpg
</div>
<div class="imgPrev">
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/4.jpg" height="120" class="imgshadow" id="12" photoId="21" iW="1920" iH="1200" name="4.jpg" size="547799"/>
    4.jpg
</div>
<div class="imgPrev">
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/3.jpg" height="120" class="imgshadow" id="13" photoId="22" iW="1920" iH="1200" name="3.jpg" size="517538"/>
    3.jpg
</div>
<div class="imgPrev">
    <input type="checkbox" name="red-box" value="1" /><img src="./photos/unsorted/2.jpg" height="120" class="imgshadow" id="14" photoId="23" iW="1920" iH="1200" name="2.jpg" size="529322"/>
    2.jpg
</div>

</div>

jQuery: извините, большинство комментариев на французском 

/*
 *  
 */
window.initialClick = undefined;
/*
 *  COUNTER - #/Size of selected photos - Displayed in the left bar
 */
var globalSelectedPhotos = 0;
var globalSelectedPhotosSize = 0;
function globalSelectedPhotosUpdate() {
    $('.globalSelectedPhotos').text(globalSelectedPhotos);
    globalSelectedPhotosSize_mb = (globalSelectedPhotosSize / 1024 / 1024).toFixed(2);
    $('.globalSelectedPhotosSize').text(globalSelectedPhotosSize_mb);
}



function photoChecked(x) {
    $(x).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
    $(x).addClass('checked');
    $(x).animate({opacity: 0.6, queue: 0}, 500);
    globalSelectedPhotos ++;
    globalSelectedPhotosSize += Number($(x).attr('size'));
    globalSelectedPhotosUpdate();
}
function photoUnchecked(x) {
    $(x).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
    $(x).removeClass('checked');
    $(x).animate({opacity: 1, queue: 0}, 500);
    globalSelectedPhotos --;
    globalSelectedPhotosSize -= Number($(x).attr('size'));
    globalSelectedPhotosUpdate();
}
function photoUnselectAll() {
    $('.imgshadow input[type="checkbox"]').prop('checked', false).removeAttr('checked');
    $('.imgshadow').removeClass('checked');
    $('.imgshadow').animate({opacity: 1, queue: 0}, 250);
    globalSelectedPhotos = 0;
    globalSelectedPhotosSize = 0;
    globalSelectedPhotosUpdate();
}

// Capture right click
$(".imgshadow").live('mouseover', function(e) {  
                    $(this).addClass("hover");
                })
                .live('mouseout', function(e) {  
                    $(this).removeClass("hover");
                })
                .live('click', function(e) {  
                    //Si CTRL est pressé - Sélection multiple
                    if (e.ctrlKey) {
                        e.preventDefault(); 
                        //Si dé-sélectionné
                        if(!$(this).prev('input[type="checkbox"]').prop('checked')){
                            photoChecked(this); //Sélectionne
                        //Si sélectionné
                        }else{
                            photoUnchecked(this); //dé-sélectionne
                        }

                    } else if(e.shiftKey) {
                        e.preventDefault();

                        photoChecked(this);

                        var currentNode = this;
                        var up = $(this).index() > $(window.initialClick).index();
                        while (currentNode && currentNode != window.initialClick) {
                            photoChecked(currentNode);
                            currentNode = up ? currentNode.previousSibling : currentNode.nextSibling;
                        }
                        window.initialClick = undefined;

                    } else {
                        if(globalSelectedPhotos > 1) {
                            photoUnselectAll(); //Désélectionne tout
                        }
                        if(window.initialClick != this) {
                            //Place clique initiale ici
                            photoUnchecked(window.initialClick);
                            window.initialClick = this;
                            photoChecked(this);

                            var size = $(this).attr('size');
                            //globalSelectedPhotos = 1;
                            globalSelectedPhotosSize = size;
                            globalSelectedPhotosUpdate();
                        }
                    }

                    //Left bar - Preview panel
                    var src = $(this).attr('src');
                    var name = $(this).attr('name');
                    var size = $(this).attr('size');
                    var dim = $(this).attr('iW')+'x'+$(this).attr('iH');
                    $('#preview .img').html('')
                                    .append('<img src="'+src+'" width="100%">');
                    $('#preview #properties .prop_photoName').text(name);
                    $('#preview #properties .prop_photoDim').text(dim);
                    $('#preview #properties .prop_photoSize').text(size);
                });

Ответы [ 2 ]

1 голос
/ 10 сентября 2011

Мне кажется, что метод index() работает нормально. Я рекомендую использовать простую комбинацию этого и свойств nextSibling и previousSibling, чтобы отметить выбранные элементы.

Вот пример того, что я имею в виду: http://jsfiddle.net/dgbVV/

0 голосов
/ 10 сентября 2011

Кажется, это работает. Без дополнительной информации о том, что вы пробовали и т. Д., Это похоже на работу с HTML, который вы разместили. 

$('.imgPrev').click(function()
{
    alert($('div.imgPrev').index(this));
});
...