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

请原谅这个问题的好处。我一直在试图做这项工作的黑客数天！jquery prev隐藏一个div并点击链接后显示另一个

请查看我的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; 
}

狡猾Jqerying！

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

功能背后的想法是显示新一之前的所有先前显示的div被清除。

在此先感谢任何人都可以为我流光！

来源

2013-01-16 Nick A

prev仅选择所选元素的前一个兄弟元素，可以使用closest方法用于选择a元件，其是目标元素的兄弟，然后prev方法的祖父母。

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

http://jsfiddle.net/yP4cz/

来源

2013-01-16 21:00:48 undefined

笑，我做了一个小提琴与几乎相同的代码，回来后，和注意到你几秒打我给它： P +1 –

耶！你们真棒！知道它必须是简单的东西！ –

prev()选择前一个兄弟，所以选择“big_pic”作为兄弟，你首先需要得到相应的“DIV1”。

由于e代表的链接，你可以用.parents()做到这本以获取其含有“DIV1”的保持，然后从那里使用prev()获得相应的“big_pic”。例如：

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

来源

2013-01-16 21:04:51

非常感谢您的回复。这有助于我的理解。 –

做这样的事情，而不在HTML的onclick：

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

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

来源

2013-01-16 21:05:50 Chanckjh

干杯..这是更好的做法吗？ –

是的。 JavaScript应该始终与html分开。 – Chanckjh

你在说， '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-16 21:08:29 Icestorm0141

感谢您的回复......很好的帮助 –

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

回答

相关问题