javascript - 如何通过点击不同的按钮显示不同的元素

Question

我需要通过点击元素显示文本，每个绿色“按钮”显示他的文本。通过单击按钮，按钮会出现黑色边框并显示其文本。当我点击第二个按钮时，第一个按钮必须松开黑色边框，第二个按钮得到边框。

这是简单的html

<div id="container">
    <div class="btn" id ="btn-1"></div>
    <p class="text" id="text-1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2"></div>
    <p class="text" id="text-2">
        HI i'm numbr 2
    </p>
</div>

CSS

#container
{
    height:400px;
    width:400px;
    position:relative;
}

.btn{
    width : 50px;
    height : 50px;
    border-radius : 50px;
    background-color : green;
    margin:10px auto;
}
.text
{ 
    position:absolute;
    color:red;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:150px; 
    display:none;
 }

.clicked{
    border : 3px solid #000;
}

J查询:

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-2').toggleClass("clicked");
});

这是一个JSFFIDLE demo

Answer 1

我会在您重复代码时简化 javascript(这并不好)

// you can also use $('[data-showbutton]').click( ...

$('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');

    // only show the selected
    $('[data-showbutton=' + btn + ']').addClass('clicked');  
    $('[data-button=' + btn + ']').show();
}

然后只需将 data- 添加到您的 html 中，例如:

<div id="container">
    <div class="btn" id ="btn-1" data-showbutton="1"></div>
    <p class="text" data-button="1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2" data-showbutton="2"></div>
     <p class="text" data-button="2">
        HI i'm numbr 2
    </p>
</div>

实例: http://jsfiddle.net/EgLKV/6484/

换句话说，data-showbutton 将显示所有具有 data-button 的元素，并且您可以有更多元素，例如，使其更简单和可扩展。