使用按钮更改文本显示/隐藏 div答案

【问题标题】：show/hide div with button changing text使用按钮更改文本显示/隐藏 div
【发布时间】：2013-05-20 18:55:38
【问题描述】：

我有一个问题，我不知道如何用 jQuery 解决，因为我还是很菜鸟。

我有4个盒子（或更多），每个盒子都会有一个“查看详细信息”按钮，我需要的是，当你点击查看详细信息时，会显示一个隐藏的div，里面有盒子的对应信息，但也需要那个时候您显示隐藏的 div，按钮更改为“隐藏详细信息” - 我可以用切换来点它，但问题是，如果您单击按钮查看另一个框的详细信息，则 div 不会隐藏，并且按钮带有“隐藏details”不会恢复到默认状态，希望有人理解并帮助我。

<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>
<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>

这是我的 jfiddle http://jsfiddle.net/Dx9Wc/

【问题讨论】：

我希望您知道id 在页面中必须是唯一的，这是一个占位符，对吧？

标签： jquery toggle show-hide

【解决方案1】：

试试这个小提琴http://jsfiddle.net/RdSeS/

$(".view_details").click(function () {
$(".details").hide();
$(this).parents('.box').find('.details').html($("#model_details").html()).show();

});

【讨论】：

【解决方案2】：

我认为您正在寻找这样的东西：

$(document).ready(function() {
    $('#product_id_1').on('click', function(){
        $('#model_details').css('display', 'block');
    });
});

http://jsfiddle.net/Dx9Wc/3/

【讨论】：

记得简化你的问题，不要对多个元素使用相同的 id。