显示隐藏 jquery 多个 div

Question

如果已经回答，请原谅我， 但我搜索并找不到与我的要求足够相似的案例。

我有 8 张图片（最终我将从数据库中提取信息，但我想尝试让这部分自己工作）。

每张图片都是 div 的一个切换开关，其中包含该图片的详细信息（事件）。

目前所有详细信息 div 都被隐藏，当您单击图像时，其详细信息 div 会“显示”。在 details div 中是一个“隐藏”按钮，它隐藏 details div 并且图像从下方滑回视图。

我想要这样，如果您单击屏幕底部的不同图像，而详细信息 div 已打开（显示），它会关闭该详细信息 div 并打开该图像的详细信息 div点击。

最终，我希望在详细信息 div 中有一个“下一个”链接，该链接可以滚动到下一个详细信息 div，但是，一次一步。

我的代码是：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".obtn1").click(function(){
        $(".detail1").show(1500);
    });
});
$(document).ready(function(){
    $(".cbtn1").click(function(){
        $(".detail1").hide(1500);
    });
});
$(document).ready(function(){
    $(".obtn2").click(function(){
        $(".detail2").show(1500);
    });
});

... on up to obtn8 and cbtn8
</script>

使用以下html：

<div id="event-detail">
    <div class="detail1" style="display:none;height:1000px;" align="center">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund1.jpg" width="650" height="478">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail2" style="display:none;height:1000px;" align="center">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund2.jpg" width="650" height="478">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail3" style="display:none;height:1000px;" align="center">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund3.jpg" width="650" height="478">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    </div>

... on up to 8

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img class="obtn1" src="images/dev_detail/BitterSuite_logo1.jpg" width="200" height="147">
        </td>
        <td><img class="obtn2" src="images/dev_detail/BitterSuite_logo2.jpg" width="200" height="147">
        </td>
        <td><img class="obtn3" src="images/dev_detail/BitterSuite_logo3.jpg" width="200" height="147">
        </td>
        <td><img class="obtn4" src="images/dev_detail/BitterSuite_logo4.jpg" width="200" height="147">
        </td>
    </tr>
    <tr>
        <td><img class="obtn5" src="images/dev_detail/BitterSuite_logo5.jpg" width="200" height="147">
        </td>
        <td><img class="obtn6" src="images/dev_detail/BitterSuite_logo6.jpg" width="200" height="147">
        </td>
        <td><img class="obtn7" src="images/dev_detail/BitterSuite_logo7.jpg" width="200" height="147">
        </td>
        <td><img class="obtn8" src="images/dev_detail/BitterSuite_logo8.jpg" width="200" height="147">
        </td>
    </tr>
</table>

我现在非常喜欢那里的默认幻灯片效果，并希望尽可能保留它。 对此的任何帮助将不胜感激。 提前致谢。 干杯阿尔

Answer 1

查看更新的fiddle 使用下面的 jscript：

$(document).ready(function () {
    //handle the click of the image button to show the div
    $(".obtn").click(function() {
        //isolate the div number
        var divNumber = $(this).prop('id').replace("obtn", "");
        //hide all details div, using the class name
        $(".detailDiv").hide(1500);
        //show the correct details div, based on the selected div number
        $("#detail" + divNumber).show(1500);
    });

    //handle the more button close function to hide all detail divs
    $('.cbtnImg').click(function(){
        $(".detailDiv").hide(1500);
    });
});

我将所有图像更改为具有 obtn 类，将详细 div 更改为具有 detailDiv 类，将更多按钮更改为具有 ctnImg 类。

我将唯一名称保留为元素 id，并使用上面的 jscript，然后我可以关闭所有详细信息 div，只打开所需的特定名称。

Answer 2

请看一下

http://jsfiddle.net/s5ENf/11/

Almeister 先生9 我没有正确理解您的问题。这是你的要求吗？

我做了改变

<div id="detail1" class="detail" style="display:none;height:1000px;" align="center">

$(document).ready(function () {
    $(".obtn1").click(function () {
        $(".detail").hide();
        $("#detail1").show(1500);
    });
});
$(document).ready(function () {
    $(".cbtn1").click(function () {
        $("#detail1").hide(1500);
    });
});

我将每个 div 的 class="detail1" 更改为 id="detail1"，class="detail2" 更改为 id="detail2" 和 added class="detail"。

注意：我只对 3 张图片进行了更改。请为他人做这件事