Question

请原谅这个问题的新闻。我一直在努力工作几天！

请在此处查看我的fiddle。

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

我尝试使用'prev'选择器，但它似乎不起作用，除非我要显示的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;
}

Dodgy Jqerying！

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

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

提前感谢任何人都能为我带来的任何光明!!

Answer 1

prev仅选择所选元素的上一个兄弟元素，您可以使用closest方法选择a元素的祖父母，该元素是目标元素的兄弟，然后{ {1}}方法。

prev

http://jsfiddle.net/yP4cz/

Answer 2

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

由于e表示链接，您可以使用.parents()执行此操作以获取其包含的“div1”，然后使用prev()来获取相应的'big_pic'。 E.g：

$(e).parents('div.div1').prev('div.big_pic').show('slow');

Answer 3

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

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

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

Answer 4

你说'big_pic'div只显示它与链接在同一div中是正确的。这是多么有效。这是前一个兄弟姐妹。

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

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

jquery prev隐藏一个div并在点击链接后显示另一个div

4 个答案: