Question

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

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

每个图像都是div的切换，用于保存该图像的详细信息（事件）。

目前所有细节div都被隐藏，当您点击图片时，其详细信息div显示为“显示”。在细节div中是一个“隐藏”按钮，隐藏细节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>

我非常喜欢此时的默认幻灯片效果，并希望尽可能保留。任何帮助都将非常感激。提前致谢。干杯Al

Answer 1

请看一下

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张图片进行了更改。请为其他人做这件事

Answer 2

查看更新的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并只打开所需的特定名称。

show hide jquery multiple divs

2 个答案: