2

此代码用于可过滤的投资组合。最初我为下一个和上一个链接使用 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();
   }
        });
});

我不得不一直爬到 Dow 树上，因为厚框代码会自动显示在页面底部。我认为一种可能的解决方案是为了让厚盒加载，你必须有 class="thickbox"。如果我能以某种方式说 load(url).withClass('thickbox') 它可能会起作用，但我确定语法应该如何。

4

2 回答 2

0

谢谢你的详细回复。这是我第一次真正深入了解 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;
}
});

它可以工作，但任何关于如何优化的建议都将不胜感激。

于 2012-05-28T01:36:41.620 回答
0

您有很多事情要解决，但这里有一些信息可以帮助您走上正确的道路：

1)

window.location.load不退出，您正在寻找的是window.location.href：

请参阅MDN的文档

请参阅MSDN的文档

例如， window.location.href = url;

2)

此外，

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

您正在使用以 开头的 ID 设置 li #。

有关更多信息，请参阅此链接！

解决方法：

<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

请参阅此链接了解更多信息！

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

请参阅此小提琴示例！

请注意，该标签a没有任何属性value，因此它是无效标记。

有关详细信息，请参阅此链接。

于 2012-05-27T04:08:04.270 回答