在同一頁面中加載鏈接jQuery

Question

此代碼適用於可篩選的產品組合。最初我有PHP的下一個和以前的鏈接，但是當組合被過濾時，它不會找到下一個過濾的對象。我發現過濾器將列表項放置在DOM中彼此相鄰，所以我使用next（）來獲得結果。但是，鏈接沒有正確加載。它是加載thickbox的同一頁面上的鏈接。我已經成功地將它打開到一個新的窗口並附加到窗口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(); 
    } 
     }); 
}); 

我不得不爬上一路上揚，道指樹，因爲ThickBox的代碼會自動顯示在頁面的底部。我認爲一種可能的解決方案是爲了讓thickbox加載你必須有class =「thickbox」。如果我能以某種方式說load（url）.withClass（'thickbox'）它可能工作，但我確定語法應該如何。

Answer 1

你有很多事情理清，但這裏的一些信息，幫助你去到正確的道路：

1）

window.location.load不退出，你在找什麼爲是window.location.href：

參見文檔from MDN

參見文檔from MSDN

例如，window.location.href = url;

---

2）

此外，

ID和名稱標記必須以字母開頭（[A-ZA-Z]）和（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

您正在設置以#開頭的ID。

請參閱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上下沒有理由。既然你的物品包裝上有ID（#portfolio-list），你可以定位它並從那裏開始！

此外，

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

應該是：

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

使用:not(:something)，被用於靶向具有一定狀態的元件，像:checked

見this Link瞭解更多信息！

---

4）

自變量namer得到打開項目的電流id，你想傳遞給下一個，你的代碼變成：

$(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; 
} 
}); 

它的工作，但任何建議如何優化將不勝感激。