0

我正在尝试创建一个并排比较两种产品的页面。到目前为止，我对每个单独的产品都有一个单独的帖子页面。在该单一帖子页面上是一组链接，允许用户选择不同的产品进行比较。

在比较页面上，我能够弄清楚如何切换从原始帖子中提取信息的第一个 div，但我也如何切换第二个 div？

这是我在单篇文章页面上的代码（我在另一个页面中使用了 Jquery 显示/隐藏作为参考）：

<ul class="linkList">
    <li><a href="product-comparison/#product1">Product 1</a></li>
    <li><a href="product-comparison/#product2">Product 2</a></li>
</ul>

这是我在比较页面上的代码：

<ul class="linkList">
    <li><a href="#product1" class="panlink">Product 1</a></li>
    <li><a href="#product2" class="panlink">Product 2</a></li>
</ul>
<div id="product1" class="switch">Product 1</div>
<div id="product2" class="switch">Product 2</div>

我的 JS：

$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.switch').show();

    $('a.panlink').click(function() {
        $('.switch').hide();
        $($(this).attr('href')).show();
    });
});

和我的 CSS：

.switch { display: none; }

我搜索了高低，我似乎无法找到答案 - 只有切换一个 div 的答案。

如果您需要澄清，请告诉我 - 谢谢！:)

4

1 回答 1

0

这是一种可能使您受益的方法。

如果您每个人都想将您的任何相关网页与当前页面进行比较，请使用 jQuery 的 AJAX 进程在一种.on('click', 'class-of-product', function() {});方法中将数据拉入当前页面。您可能还需要使用该filter()方法来减少从产品页面中提取的集合元素的数量。

于 2013-10-23T20:43:25.193 回答