隐藏所有框类并仅显示目标详细信息类

Question

>我正在尝试使用 jQuery 隐藏所有同名的类，只显示单击的类。我尝试使用父级、兄弟姐妹和定位作为对象，但它没有通过。我找到了一些工作示例，但是当我应用它们时，它们没有。任何帮助将不胜感激。

.JS

 function more() {
    $('.box').hide();
    $(".detail").show();
  }

.HTML

<div id='mainwrapper'>
        <div class='superbox'> 
        <div class='box'> 
                    <img id='image-trend' src='http://t3.gstatic.com/images?q=tbn:ANd9GcQlD9nQ_c_QAMBYW0BUhlp-1erh2x-1hTA2dLATwT_B3mKUv4xLHTtSxiBKqxtmAu29M9-26IOo'>    
                    <div id='box-title'>
                    Shirley Temple
                    </div> 
                    <div id='box-more'>
                    <img src='img/mini-clock.png' class='mini-clock'>Tue, 11 Feb 2014 12:00
                    </div>
                    <img id='image-trend-more' src='img/read-more.png' onclick='more(this)'>
                </div>
                <div class='detail'>
                <div id='spacer50'></div>
                <div id='det-box'>
                    <div id='det-box-head'>
                            <img id='image-trend-det' src='http://t3.gstatic.com/images?q=tbn:ANd9GcQlD9nQ_c_QAMBYW0BUhlp-1erh2x-1hTA2dLATwT_B3mKUv4xLHTtSxiBKqxtmAu29M9-26IOo'>    
                            <div id='box-title-det'>
                            Shirley Temple
                            </div> 
                            <div id='box-more-det'>
                            <img src='img/mini-clock.png' class='mini-clock'>The Independent
                            </div>
                    </div>  
                        <div id='det-descript'><b>Shirley Temple</b> as she appears in &#39;The Littlest Rebel&#39; directed by David Butler, 1935 Temple made a further eight films with Fox, including Little Miss Marker and, thanks to her cherubic optimism and bouncing gold girls, she quickly became one of the <b>...</b></div>        
                        <div id='orig-det'><a href='http://www.independent.co.uk/news/people/news/shirley-temple-dies-aged-85-9120936.html' target='_blank'><strong>Read trend on orign</strong></a></div>          
                </div>
                </div>
        </div>
        <div class='superbox'> 
        <div class='box'> 
                    <img id='image-trend' src='http://t1.gstatic.com/images?q=tbn:ANd9GcQ0Zqjh_mR_qEWLw9NFW8p1LTDTeHurWmAwjoMN3lf_bp6L7MqlCDGw_utGdCrU9_9B627lBao'> 
                    <div id='box-title'>
                    Laurence Fishburne
                    </div> 
                    <div id='box-more'>
                    <img src='img/mini-clock.png' class='mini-clock'>Tue, 11 Feb 2014 03:00
                    </div>
                    <img id='image-trend-more' src='img/read-more.png' onclick='more(this)'>
                </div>
                <div class='detail'>
                <div id='spacer50'></div>
                <div id='det-box'>
                    <div id='det-box-head'>
                            <img id='image-trend-det' src='http://t1.gstatic.com/images?q=tbn:ANd9GcQ0Zqjh_mR_qEWLw9NFW8p1LTDTeHurWmAwjoMN3lf_bp6L7MqlCDGw_utGdCrU9_9B627lBao'> 
                            <div id='box-title-det'>
                            Shirley Temple
                            </div> 
                            <div id='box-more-det'>
                            <img src='img/mini-clock.png' class='mini-clock'>Sky News
                            </div>
                    </div>  
                        <div id='det-descript'>A broadcaster in Los Angeles has apologised to Samuel L Jackson after confusing him with Matrix star <b>Laurence Fishburne</b> in an interview. Jackson was being asked about his role in the new RoboCop film by KTLA&#39;s entertainment reporter when the mix-up&nbsp;<b>...</b></div>        
                        <div id='orig-det'><a href='http://news.sky.com/story/1209761/samuel-l-jackson-i-am-not-laurence-fishburne' target='_blank'><strong>Read trend on orign</strong></a></div>          
                </div>
                </div>
        </div>
</div>

Answer 1

1） id是唯一的，您需要将id="image-trend-more"更改为class="image-trend-more"

2）尝试以下代码以检查它是否符合您的要求

$('.image-trend-more').click(function() {
    $(this).closest('.box').hide().next('.detail').show();
});

小提琴演示

Answer 2

尝试

function more(el) {
    $(".detail").hide();
    $(el).closest('.superbox').find('.detail').show()
}

演示：小提琴