Загрузка ссылки на той же странице jQuery

Question

Этот код предназначен для фильтруемого портфеля. Первоначально у меня был PHP для следующей и предыдущей ссылок, но когда портфолио фильтруется, он не находит следующий отфильтрованный объект. Я обнаружил, что фильтр помещает элементы списка рядом друг с другом в DOM, поэтому я использовал next() для получения результата. Однако ссылка не загружается должным образом. Его ссылка на той же странице, которая загружает толстый бокс. Я успешно открыл его, чтобы открыть его в новом окне и добавить к url ​​окна, но не кубики, пытаясь заставить его работать. Вот адрес указанного портфолио.

http://blurosemedia.com/portfolio

$(document).ready(function(){ 
    $(".portfolio-next").click(function(e) { 
    var $this = $(this); 
    if($this.data('clicked', true)) { 
    var namer = $(this).attr('value'); 
    var url = $(this).parents('body').children('#wrap').children('#inner').children('#content-sidebar-wrap').children('#content').children('ul#portfolio-list').children().next('.portfolio-item-' + namer).nextAll('.portfolio-item:not(:.isotope-hidden)').attr('id'); 
     window.location.load(url); 
     e.preventDefault(); 
    } 
     }); 
}); 

Я должен был подняться весь путь вверх по дереву DOW, так как код Thickbox автоматически отображается в нижней части страницы. Одно из возможных решений, которые, как я думал, состояло в том, чтобы загрузить толстую коробку, вы должны иметь класс = «толстый бокс». Если бы я мог как-то сказать load (url) .withClass ('thickbox'), это может сработать, но я уверен, каким должен быть синтаксис.

Answer 1

у вас есть много вещей, чтобы разобраться, но вот некоторая информация, которая поможет вам идти на правильный путь:

1)

window.location.load не выходит, что вы ищете как для window.location.href:

Смотрите документацию from MDN

Смотрите документацию from MSDN

например,window.location.href = url;

---

2)

Кроме того,

идентификатор и имя маркеры должны начинаться с буквы ([A-Za-Z]) и может следовать любое количество букв, цифр ([0-9]), дефис («-»), подчеркивание («_»), двоеточия («:») и периоды («.»).

Вы устанавливаете лики с идентификатором, который начинается с #.

Дополнительную информацию смотрите здесь this link!

обходной путь для этого:

<li id="#TB_inline?height=450&width=900&inlineId=id-3" class="portfolio-item design portfolio-item-3 isotope-item">...</li> 

Может быть:

<li class="portfolio-item design portfolio-item-3 isotope-item"> 
<span style="display:none;">#TB_inline?height=450&width=900&inlineId=id-3</span> 
</li> 

---

3)

Вы путешествуете по DOM вверх и вниз без причины. Поскольку у вас есть идентификатор, присутствующий в обертке для ваших предметов (#portfolio-list), вы можете настроить таргетинг и начать с этого!

Кроме того,

('.portfolio-item:not(:.isotope-hidden)') 

Должно быть:

('.portfolio-item:not(.isotope-hidden)') 

Используя:not(:something), используется для целевого элемента с определенным состоянием, как :checked

См this Link для получения дополнительной информации!

---

4)

Поскольку переменная namer получает текущий идентификатор открытого элемента, и вы хотите, чтобы перейти к следующему, Вы код становится:

$(document).ready(function(){ 
    $(".portfolio-next").click(function(e) { 
    e.preventDefault(); 

    var $this = $(this); 

    var namer = parseInt($this.attr('value'))+1; 
    var url = $this.attr("href"); 
     url = url.substring(0, url.indexOf('=id')); 

    window.location.href(url+"=id"+namer); 
    }); 
}); 

См это Fiddle Example!

Обратите внимание, что тег a не имеет атрибута value, поэтому это недействительная разметка.

Для получения дополнительной информации см. this link.

Answer 2

Благодарим вас за подробный ответ. Это мой первый раз, действительно погружаясь в jQuery. Это то, что я придумал:

<?php echo '<a href="#TB_inline?height=450&amp;width=900&amp;inlineId=id-" class="thickbox  
portfolio-previous" value="'; echo $portnum; echo '">Previous</a>';echo '<a 
href="#TB_inline?height=450&amp;width=900&amp;inlineId=id-" class="thickbox portfolio- 
next" value="'; echo $portnum; echo '">Next</a>';?> 

    //Next Portfolio Button 
$(".portfolio-next").hover(function(e) { 
e.preventDefault(); 
var $this = $(this); 
//Get the value of the link which is the same value as the current list item 
var namer = parseInt($this.attr('value')); 
//Find the current div in the dom and find the list item id next to it 
var falcon = $('ul#portfolio-list').children('.portfolio-item-' +  
namer).nextAll('.portfolio-item:not(:.isotope-hidden)').attr('id'); 

//Find the href tag id and add the value from falcon 
var url = $this.attr("href"); 
url = url.substring(0, url.indexOf('=id')); 
if(falcon === undefined) { 
var falcon2 = $('ul#portfolio-list').children('.portfolio-item-' + 
namer).prevAll('.portfolio-item:not(:.isotope-hidden):first').attr('id'); 
$(this).attr('href', url+"=id-"+falcon2); 
}else{ 
$(this).attr('href', url+"=id-"+falcon); 
return; 
} 
}); 

//Previous Portfolio Button 

$(".portfolio-previous").hover(function(e) { 
e.preventDefault(); 
var $this = $(this); 
//Get the value of the link which is the same value as the current list item 
var namer = parseInt($this.attr('value')); 
//Find the current div in the dom and find the list item id next to it 
var falcon = $('ul#portfolio-list').children('.portfolio-item-' +  
namer).prevAll('.portfolio-item:not(:.isotope-hidden)').attr('id'); 

//Find the href tag id and add the value from falcon 
var url = $this.attr("href"); 
    url = url.substring(0, url.indexOf('=id')); 
    if(falcon === undefined) { 
    var falcon2 = $('ul#portfolio-list').children('.portfolio-item-' + 
namer).nextAll('.portfolio-item:not(:.isotope-hidden):last').attr('id'); 
    $(this).attr('href', url+"=id-"+falcon2); 
}else{ 
$(this).attr('href', url+"=id-"+falcon); 
return; 
} 
}); 

Он работает, но любые предложения о том, как оптимизировать было бы весьма признателен.