javascript - 显示div并更改内部内容:)

Question

我有简单的 jquery 显示和隐藏，但我需要一点帮助，我有这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

和CSS

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

Adn 简单 Html

<a href="#" class="show_hide">Show</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

我需要的是，当有人单击 SHOW 时，该元素将打开，但是，我希望当有人单击 SHOW 时，在打开 DIV 元素时将 SHOW 更改为 HIDE，当有人单击 HIDE 时，再次更改为 SHOW ，问题是我将有很多隐藏元素，该怎么做？例如，我将在页面上有许多滑动DIV，但我只想打开连接到该 href 的内容

Answer 1

更改:

$('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
});

致:

 $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();

    if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
 });

更新您编辑的问题:

要仅更改相关的 div，请使用此代码(获取单击的 href 的下一个 .slidingDiv):

$('.show_hide').click(function(){
     $(this).next(".slidingDiv").slideToggle();

     if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
});

您可以在这里看到它的工作原理:http://jsfiddle.net/EYnhk/