0

请原谅这个问题的菜鸟。几天来，我一直在努力尝试使这项工作正常进行！

请在这里查看我的小提琴。

基本上我正在尝试设计一个产品视图页面，如果您单击缩略图，页面右侧会显示更大的图像（和信息）。重复的代码是用php动态生成的。

我尝试使用“上一个”选择器，但它似乎不起作用，除非我要显示的 div 与链接位于相同的包含 div 中（它不能正确显示更大的图像）。我试过prevAll，但这也没有用..现在真的卡住了！该链接嵌套在我在小提琴示例中模拟的两个 div 中，因为我认为这会对事情产生影响。

HTML

 <div class="big_pic">
    <p>product 1</p>
</div>
<div class="div1">
  <div class="div2">
    <a href="javascript:void(0)" onClick="showContent(this)">Click for product 1</a>
  </div>
</div>

<div class="big_pic">
  <p>product 2</p>
</div>
<div class="div1">
  <div class="div2">
    <a href="javascript:void(0)" onClick="showContent(this)">Click for product 2</a>
  </div>
</div>

CSS

.big_pic {
  position: absolute;
  top: 50px;
  left: 0px;
  display: none;
  border: 1px black solid;
}

狡猾的Jqerying！

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).prev('div.big_pic').show('slow');
}

该功能背后的理念是在显示新的 div 之前清除所有以前显示的 div。

提前感谢任何人都可以为我提供的任何光线！

4

4 回答 4

1

prev只选择被选元素的前一个兄弟元素，你可以使用最接近的方法选择a目标元素的兄弟元素的祖父母，然后prev方法。

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).closest('.div1').prev('div.big_pic').show('slow');
}

http://jsfiddle.net/yP4cz/

于 2013-01-16T21:00:48.127 回答
0

你说得对，'big_pic' div 只会显示它是否与链接在同一个 div 中。这就是 prev 的工作原理。它会去上一个兄弟姐妹。

您想要的是使用 .parent() 向上移动 DOM。所以我使用你的 HTML 的 javascript 看起来像这样：

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).parent().parent().prev('div.big_pic').show('slow');
}
于 2013-01-16T21:08:29.493 回答
0

prev()选择上一个兄弟，所以要选择'big_pic'作为兄弟，你首先需要到达对应的'div1'。

由于e代表链接，您可以使用.parents()它来获取包含它的'div1'，然后从那里使用prev()获取相应的'big_pic'。例如：

$(e).parents('div.div1').prev('div.big_pic').show('slow');
于 2013-01-16T21:04:51.113 回答
0

在 html 中没有 onclick 的情况下做这样的事情：

$(function(){
  $('.div2 a').on('click', function(){
    $(this).closest('.div1').prev('.big_pic').show('slow');
  });
});

jsfiddle：http: //jsfiddle.net/x3cbZ/7/

于 2013-01-16T21:05:50.427 回答