Question

我有一个问题，我不知道如何用jQuery解决，因为我还是非常棒的。

我有4个盒子（或更多），每个盒子都有一个“查看详细信息”按钮，我需要的是当你点击查看详细信息时显示一个隐藏的div与盒子的相应信息，但也需要你显示隐藏的div，按钮变为“隐藏详细信息” - 我可以用切换点缀它，但是如果你点击按钮查看另一个框的详细信息，则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>
<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/

Answer 1

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

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

});

Answer 2

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

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

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

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

2 个答案: